@grapecity/activereports
Advanced tools
Install all ActiveReportsJS javascript components using npm install @grapecity/activereports
For more information on how to use ActiveReportsJS and available tools, refer to the Documentation or API reference for guidance.
View ActiveReportsJS demos here.
index.html head section add reference to ar-js-core.js and ar-js-viewer.js from dist folder and ar-js-viewer.css and ar-js-ui.css from styles folder: <link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css">
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
index.html in head section (above ar-js-core.js and ar-js-viewer.js) add reference to ie-polyfills.js from dist folder: <script src="./node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script>
index.html head section add reference(s) to ar-js-pdf.js, ar-js-html.js or ar-js-xlsx.js from dist folder: <script src="./node_modules/@grapecity/activereports/dist/ar-js-pdf.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-html.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-xlsx.js"></script>
index.html body section add div with id to host ActiveReportsJS Viewer. Note, that it requires container height to be defined: <div id="root" style="height: 100vh"></div>
index.html add script to load viewer and subscribe it to body onload event:<body onload="loadViewer()">
<script>
function loadViewer() {
var viewer = new ActiveReports.Viewer('#root');
viewer.open({
"Name": "Report",
"Type": "report",
"Body": {
"Name": "Body",
"Type": "section",
"ReportItems": [
{ Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Top: "3in", Left: "3in", Height: "1in" }
]
}
});
}
</script>
<div id="root" style="height: 100vh"></div>
</body>
To create and modify reports, you will need either the ActiveReportsJS Designer electron designer application for MacOS, Win, or Linux, or use the ActiveReportsJS Designer component in your web application as described below.
npm initnpm install @grapecity/activereportsindex.html and add reference to ar-js-core.js, ar-js-designer.js libraries and ar-js-designer.css, ar-js-ui.css styles<html lang="en">
<head>
<title>ActiveReportsJS Designer</title>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css" type="text/css">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-designer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-designer.js"></script>
</head>
<body></body>
</html>
index.html in body section add div with id to host ActiveReportsJS Designer. Note, that it requires container height to be defined: <div id="designer" style="height: 100vh;"></div>
index.html add script to load designer and subscribe it to body onload event:<body onload="loadDesigner()">
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
}
</script>
<div id="designer" style="height: 100vh;"></div>
</body>
index.html in browser and start designing report.ar-js-viewer.js file and corresponding style (after ar-js-core.js library referencing).<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
<div id="viewer" style="height: 100vh;display:none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
const viewer = new GC.ActiveReports.ReportViewer.Viewer("#viewer");
///specify and add back button to viewer
var backbutton = {
key: '$backbutton',
iconCssClass: 'mdi mdi-backburger',
enabled: true,
action: function(item){
$("#designer").toggle();
$("#viewer").toggle();
}
}
viewer.toolbar.addItem(backbutton);
//describe onRender method
var onRender = (reportInfo) => {
$("#designer").toggle();
$("#viewer").toggle();
viewer.open(reportInfo.definition);
}
designer.setActionHandlers({
onRender: onRender
});
}
</script>
index.html page in browser, add control to design surface and click on 'Preview' to preview designed report.ActiveReportsJSは、モダンなWebアプリケーションに帳票出力機能を組み込めるJavaScriptコントロールです。帳票の外観デザインの設定からデータ接続、印刷、PDFやExcelへの出力まで、Web帳票開発に必要な機能が揃っています。
ActiveReportsJSチュートリアルデモでは、ActiveReportsJSを使用したアプリケーションの作成方法や、各コントロールの基本機能、実用的なアプリケーションの例などを紹介しています。
また、トライアル版をダウンロードして、実際の機能や動作をご確認いただけます。
npm install @grapecity/activereports
日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
製品の各種ドキュメントは、下記をご参照ください。
製品の詳細や価格、ライセンスについては、下記をご参照ください。 https://www.grapecity.co.jp/developer/activereportsjs
ActiveReportsJS 是一个轻量级的报表解决方案，为您提供简单易用的丰富的 API ，创建复杂报表，轻松集成到您的项目重 为了满足常用的报表布局需求，不需要依赖于服务端。
ActiveReportsJS支持以下报表类型："页面" 和"RDL 报表"。
使用命令 npm install @grapecity/activereports 安装 ActiveReportsJS
index.html head 标签内添加 dist文件夹中的 js 文件的引用， ar-js-core.js 、 ar-js-viewer.js 及styles 文件夹中的css文件 ar-js-viewer.css、ar-js-ui.css : <link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css">
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
index.html head标签内添加ie-polyfills.js文件 (具体位置要在 ar-js-core.js 和 ar-js-viewer.js文件前面引用) <script src="./node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script>
ar-js-pdf.js, ar-js-html.js 及 ar-js-xlsx.js dist 文件夹的引用: <script src="./node_modules/@grapecity/activereports/dist/ar-js-pdf.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-html.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-xlsx.js"></script>
index.html body 标签内声明 div 用于展示 ActiveReportsJS Viewer。 注意, 必须要定义height属性: <div id="root" style="height: 100vh"></div>
index.html body onload 事件中添加以下脚本:<body onload="loadViewer()">
<script>
function loadViewer() {
var viewer = new ActiveReports.Viewer('#root');
viewer.open({
"Name": "Report",
"Type": "report",
"Body": {
"Name": "Body",
"Type": "section",
"ReportItems": [
{ Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Top: "3in", Left: "3in", Height: "1in" }
]
}
});
}
</script>
<div id="root" style="height: 100vh"></div>
</body>
我们 ActiveReportsJS Designer。下载设计器
ActiveReportsJS 提供了极其易用的设计器，助您快速创建和修改报表文件，并且提供了两种平台的设计器，1.Electron 桌面设计器,提供了 Windows,Mac,Linux 三个版本的设计器报表设计器。
或者使用在Web项目中使用 ActiveReportsJS Designer 控件集成在线设计器。 以下示例将演示如何将设计器集成到 Web项目中
npm initnpm install @grapecity/activereportsindex.html 页面，添加 ActiveReportsJS 需要的引用ar-js-core.js, ar-js-designer.js 及样式文件 ar-js-designer.css, ar-js-ui.css。<html lang="en">
<head>
<title>ActiveReportsJS Designer</title>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css" type="text/css">
<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-designer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-designer.js"></script>
</head>
<body></body>
</html>
index.html 页面中body区域中添加div，作为ActiveReportsJS Designer的宿主元素。 注意必须要指定该div的高度，否则设计器无法显示完全。 <div id="designer" style="height: 100vh;"></div>
index.html 实现body的onload 事件，并添加以下代码，实现在页面初始化时，加载设计器<body onload="loadDesigner()">
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
}
</script>
<div id="designer" style="height: 100vh;"></div>
</body>
index.html 页面，就可以看到设计器。ar-js-viewer.js 文件及 ar-js-core.js及相关css文件 (在js文件添加完成后)。<link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css" type="text/css">
<script src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
<div id="viewer" style="height: 100vh;display:none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>
<script>
function loadDesigner(){
const designer = new GC.ActiveReports.ReportDesigner.Designer("#designer");
const viewer = new GC.ActiveReports.ReportViewer.Viewer("#viewer");
///specify and add back button to viewer
var backbutton = {
key: '$backbutton',
iconCssClass: 'mdi mdi-backburger',
enabled: true,
action: function(item){
$("#designer").toggle();
$("#viewer").toggle();
}
}
viewer.toolbar.addItem(backbutton);
//describe onRender method
var onRender = (reportInfo) => {
$("#designer").toggle();
$("#viewer").toggle();
viewer.open(reportInfo.definition);
}
designer.setActionHandlers({
onRender: onRender
});
}
</script>
index.html 页面, 将控件添加到设计界面，然后单击“预览”以预览设计的报表。FAQs
ActiveReportsJS
The npm package @grapecity/activereports receives a total of 6,062 weekly downloads. As such, @grapecity/activereports popularity was classified as popular.
We found that @grapecity/activereports demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.