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.

dashboard image

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.

Installation

To install the latest release version:

npm install @grapecity/activereports

To install a specific version:

npm install @grapecity/activereports@{VersionNumber}

Documentation

For more information on how to use ActiveReportsJS, online documentation can be found here:

Samples

To quickly jump in with ActiveReportsJS, check out our Demo Gallery. You can also easily create custom themes using the on-line Theme Editor.

Licensing

Read more about ActiveReportsJS Licensing.

ActiveReportsJS JP

ActiveReportsJSは、モダンなWebアプリケーションに帳票出力機能を組み込めるJavaScriptコントロールです。帳票の外観デザインの設定からデータ接続、印刷、PDFやExcelへの出力まで、Web帳票開発に必要な機能が揃っています。

サンプル

ActiveReportsJSチュートリアルデモでは、ActiveReportsJSを使用したアプリケーションの作成方法や、各コントロールの基本機能、実用的なアプリケーションの例などを紹介しています。

また、トライアル版をダウンロードして、実際の機能や動作をご確認いただけます。

インストール方法

npm install @grapecity/activereports

日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

ドキュメント

製品の各種ドキュメントは、下記をご参照ください。

製品情報

製品の詳細や価格、ライセンスについては、下記をご参照ください。
https://developer.mescius.jp/activereportsjs

サポート

ヘルプやデモに加え、ナレッジベースでは製品の技術情報を公開しております。また、サブスクリプションをご契約中のお客様は、E-mailによる技術サポートをご利用いただけます。

ActiveReportsJS CN

ActiveReportsJS 是一个轻量级的报表解决方案，为您提供简单易用的丰富的 API ，创建复杂报表，轻松集成到您的项目重为了满足常用的报表布局需求，不需要依赖于服务端。
ActiveReportsJS支持以下报表类型："页面" 和"RDL 报表"。

安装

使用命令 npm install @grapecity/activereports 安装 ActiveReportsJS

产品资料

更多产品资料请点击帮助文档或 API 文档。

示例

ActiveReportsJS 示例.

入门指南 - 创建第一个 ActiveReportsJS Viewer 应用

操作步骤

在 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项目中

第一个 ActiveReportsJS 设计器纯前端应用

步骤

初始化存储库 npm init
安装所需的组件 npm install @grapecity/activereports
创建 index.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 页面，就可以看到设计器。

为设计器添加预览功能，即添加 ActiveReportsJS Viewer组件实现预览

添加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 宿主元素ActiveReportsJS Viewer。注意需要定义容器高度。

<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"/>

初始化Viewer，并在工具栏中添加返回按钮，编写 Handler执行预览方法： (更多信息请参考 Documentation 或 API reference ).

<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 KR

액티브리포츠JS (ARJS)는 자바스크립트로 만들어진 고성능 프론트엔드 리포팅 솔루션입니다. 웹과 모바일을 모두 지원하고 서버에 의존도가 없기 때문에 쉽고 빠르게 솔루션을 도입하실수 있습니다.
"Page"와 "RDL" 형태의 리포트 타입을 지원하고 있습니다.

설치

다음을 사용하여 모든 ActiveReportsJS 자바 스크립트 구성 요소를 설치할 수 있습니다. npm install @grapecity/activereports

도움말

ActiveReportsJS 사용 방법 및 도구에 대한 자세한 내용은 도움말과 API 참고 가이드를 참고해 주시기 바랍니다.

데모

ActiveReportsJS 데모 바로가기.

ActiveReportsJS 뷰어

첫 번째 ActiveReportsJS 뷰어 어플리케이션 만들기

과정

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>

ActiveReportsJS 디자이너

보고서를 만들거나 수정하려면 Win, MacOS 또는 Linux용 **ActiveReportsJS 디자이너 어플리케이션**를 사용하시거나, 또는 아래의 ActiveReportsJS 디자이너 컴포넌트를 사용하시서 웹 상에서 직접 최종사용자에게 제공할 수도 있습니다.

첫 번째 ActiveReportsJS Designer 애플리케이션 만들기

과정

빈 저장소 초기화 npm init
필수 컴포넌트 설치 npm install @grapecity/activereports
index.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를 브라우저에서 열고 보고서를 디자인 합니다.

ActiveReportsJS 뷰어를 사용하여 보고서 미리보기 기능 추가

디자이너에서 미리보기를 추가하려면 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>

ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :

<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"/>

뷰어를 초기화하고 도구 모음에 뒤로 버튼을 추가한후 미리보기 메서드에 대한 핸들러를 작성합니다. (뷰어와 디자이너 사용법에 대한 자세한 내용은, 도움말과 API 참고 가이드를 참고해 주시기 바랍니다.)

<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' 페이지를 열고 디자인 화면에 컨트롤을 추가한후 '미리보기'를 클릭하여 디자인된 보고서를 미리 볼수 있습니다.

Keywords

FAQs

What is @grapecity/activereports?

Is @grapecity/activereports popular?

Is @grapecity/activereports well maintained?

Last updated on 20 Feb 2024

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.

Install

@grapecity/activereports

ActiveReportsJS