@grapecity/activereports
Advanced tools
A Complete JavaScript Reporting Tool for Enterprise Applications.
ActiveReportsJS is a powerful reporting tool for web applications that allows developers and report authors to easily design and display reports within their applications. With a wide range of features, such as drill-down, runtime data filtering, and parameter-driven reports, as well as compatibility with popular frameworks such as Angular, React, and Vue, ActiveReportsJS simplifies the process of creating and managing reports, enabling developers to enhance their applications' capabilities and deliver valuable insights to end-users.
The ActiveReportsJS suite includes both a Report Viewer and Report Designer component. The Viewer allows end-users to view and interact with reports, while the Designer enables developers to design and customize reports, either within the same web application or by using the Standalone Report Designer.
To install the latest release version:
npm install @grapecity/activereports
To install a specific version:
npm install @grapecity/activereports@{VersionNumber}
For more information on how to use ActiveReportsJS, online documentation can be found here:
To quickly jump in with ActiveReportsJS, check out our Demo Gallery.
Read more about ActiveReportsJS Licensing.
ActiveReportsJSは、モダンなWebアプリケーションに帳票出力機能を組み込めるJavaScriptコントロールです。帳票の外観デザインの設定からデータ接続、印刷、PDFやExcelへの出力まで、Web帳票開発に必要な機能が揃っています。
ActiveReportsJSチュートリアルデモでは、ActiveReportsJSを使用したアプリケーションの作成方法や、各コントロールの基本機能、実用的なアプリケーションの例などを紹介しています。
また、トライアル版をダウンロードして、実際の機能や動作をご確認いただけます。
重要：このパッケージは、将来、廃止される予定です。 新しいパッケージ（@mescius/activereportsjs）への移行をご検討ください。
npm install @grapecity/activereports
日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
製品の各種ドキュメントは、下記をご参照ください。
製品の詳細や価格、ライセンスについては、下記をご参照ください。
https://developer.mescius.jp/activereportsjs
ヘルプやデモに加え、ナレッジベースでは製品の技術情報を公開しております。また、サブスクリプションをご契約中のお客様は、E-mailによる技術サポートをご利用いただけます。
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>
ar-js-pdf.js, ar-js-html.js, ar-js-tabular-data.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>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-tabular-data.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 页面, 将控件添加到设计界面，然后单击“预览”以预览设计的报表。다음을 사용하여 모든 ActiveReportsJS 자바 스크립트 구성 요소를 설치할 수 있습니다. npm install @grapecity/activereports
ActiveReportsJS 사용 방법 및 도구에 대한 자세한 내용은 도움말과 API 참고 가이드를 참고해 주시기 바랍니다.
index.html의 헤드섹션에 dist폴더의 ar-js-core.js와 ar-js-viewer.js에 대한 참조를 추가하고 styles폴더에서 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의 헤드 섹션에 dist 폴더에 있는 ar-js-pdf.js, ar-js-html.js, ar-js-tabular-data.js 또는 ar-js-xlsx.js에 대한 참조를 각각 필요에 따라 추가합니다 : <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>
<script src="./node_modules/@grapecity/activereports/dist/ar-js-tabular-data.js"></script>
index.html의 바디 섹션에서 ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 : <div id="root" style="height: 100vh"></div>
index.html에서 뷰어를 로드하고 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>
보고서를 만들거나 수정하려면 Win, MacOS 또는 Linux용 **ActiveReportsJS 디자이너 어플리케이션**를 사용하시거나, 또는 아래의 ActiveReportsJS 디자이너 컴포넌트를 사용하시서 웹 상에서 직접 최종사용자에게 제공할 수도 있습니다.
npm initnpm install @grapecity/activereportsindex.html 만들어 라이브러리에서 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의 바디 섹션에서 ActiveReportsJS 디자이너를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 : <div id="designer" style="height: 100vh;"></div>
index.html에서 디자이너를 로드하고 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에 대한 참조를 추가하고 그에 해당하는 CSS에 대한 참조도 추가해주셔야 합니다.(ar-js-core.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>
FAQs
ActiveReportsJS
The npm package @grapecity/activereports receives a total of 3,907 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
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.