@grapecity/activereports

ActiveReportsJS

Usage no npm install needed!

<script type="module">
  import grapecityActivereports from 'https://cdn.skypack.dev/@grapecity/activereports';
</script>

README

English | 日本語 | 中文 | 한국어

ActiveReportsJS

  • ActiveReportsJS (ARJS) is JavaScript version of ActiveReports that can work on any modern browser. It doesn't have server-dependency.
  • Supported report types are "Page" and "RDL".

Installation

Install all ActiveReportsJS javascript components using npm install @grapecity/activereports

Documentation

For more information on how to use ActiveReportsJS and available tools, refer to the Documentation or API reference for guidance.

Samples

View ActiveReportsJS demos here.

ActiveReportsJS Viewer

Creating your first ActiveReportsJS Viewer application

Steps

  1. In 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>
  1. If exports support is needed, in index.html head section add reference(s) to ar-js-pdf.js, ar-js-html.js, ar-js-tabular-data.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>
    <script src="./node_modules/@grapecity/activereports/dist/ar-js-tabular-data.js"></script>
  1. In 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>
  1. In 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>

ActiveReportsJS Designer

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.

Creating your first ActiveReportsJS Designer application

Steps

  1. Initialize empty repository npm init
  2. Install required components npm install @grapecity/activereports
  3. Create index.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>
  1. In 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>
  1. In 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>
  1. Now open index.html in browser and start designing report.

Add ability to Preview reports using ActiveReportsJS Viewer

  1. To add preview in designer you need reference to 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>
  1. Add div with id to host ActiveReportsJS Viewer. Note, that it requires container height to be defined.
<div id="viewer" style="height: 100vh;display:none"></div>
  1. Add additional references in head section (helps to organize preview)
<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"/>
  1. Now initialize viewer, add back button to it's toolbar and write handler for preview method (for more information on how to use viewer, designer, refer to the Documentation or API reference for guidance).
<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>
  1. Now open your index.html page in browser, add control to design surface and click on 'Preview' to preview designed report.

ActiveReportsJS JP

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

サンプル

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

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

インストール方法

npm install @grapecity/activereports

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

ドキュメント

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

製品情報

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

ActiveReportsJS CN

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

  • ActiveReportsJS支持以下报表类型："页面" 和"RDL 报表"。

安装

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

产品资料

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

示例

ActiveReportsJS 示例.

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

操作步骤

  1. 在 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>
  1. 如果需要支持导出按钮， 需要添加 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>
  1. 在 index.html body 标签内声明 div 用于展示 ActiveReportsJS Viewer。 注意, 必须要定义height属性:
    <div id="root" style="height: 100vh"></div>
  1. 在 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 设计器 纯前端应用

步骤

  1. 初始化存储库 npm init
  2. 安装所需的组件 npm install @grapecity/activereports
  3. 创建 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>
  1. 在 index.html 页面中body区域中添加div，作为ActiveReportsJS Designer的宿主元素。 注意必须要指定该div的高度，否则设计器无法显示完全。
    <div id="designer" style="height: 100vh;"></div>
  1. 在 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>
  1. 用浏览器打开 index.html 页面，就可以看到设计器。

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

  1. 添加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>
  1. 添加 div 宿主元素ActiveReportsJS Viewer。 注意需要定义容器高度。
<div id="viewer" style="height: 100vh;display:none"></div>
  1. 添加其他引用 (协助预览功能)
<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"/>
  1. 初始化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>
  1. 在浏览器打开 index.html 页面, 将控件添加到设计界面，然后单击“预览”以预览设计的报表。

ActiveReportsJS KR

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

설치

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

도움말

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

데모

ActiveReportsJS 데모 바로가기.

ActiveReportsJS 뷰어

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

과정

  1. 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>
  1. 만일 내보내기 기능이 필요하다면,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>
  1. index.html의 바디 섹션에서 ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :
    <div id="root" style="height: 100vh"></div>
  1. 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 애플리케이션 만들기

과정

  1. 빈 저장소 초기화 npm init
  2. 필수 컴포넌트 설치 npm install @grapecity/activereports
  3. 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>
  1. index.html의 바디 섹션에서 ActiveReportsJS 디자이너를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :
    <div id="designer" style="height: 100vh;"></div>
  1. 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>
  1. index.html를 브라우저에서 열고 보고서를 디자인 합니다.

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

  1. 디자이너에서 미리보기를 추가하려면 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>
  1. ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :
<div id="viewer" style="height: 100vh;display:none"></div>
  1. 헤드 섹션에 추가적인 참조 추가 (미리보기 구성에 도움)
<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"/>
  1. 뷰어를 초기화하고 도구 모음에 뒤로 버튼을 추가한후 미리보기 메서드에 대한 핸들러를 작성합니다. (뷰어와 디자이너 사용법에 대한 자세한 내용은, 도움말과 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>
  1. 브라우저에서 'index.html' 페이지를 열고 디자인 화면에 컨트롤을 추가한후 '미리보기'를 클릭하여 디자인된 보고서를 미리 볼수 있습니다.