@grapecity-software/activereportsjs

v6.0.3

Published

12 days ago

ActiveReportsJS

ActiveReportsJS CN

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

安装

使用命令 npm install @gccn/activereportsjs 安装 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/@gccn/activereportsjs/styles/ar-js-ui.css">
    <link rel="stylesheet" type="text/css" href="./node_modules/@gccn/activereportsjs/styles/ar-js-viewer.css">

    <script src="./node_modules/@gccn/activereportsjs/dist/ar-js-core.js"></script>
    <script src="./node_modules/@gccn/activereportsjs/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/@gccn/activereportsjs/dist/ar-js-pdf.js"></script>
    <script src="./node_modules/@gccn/activereportsjs/dist/ar-js-html.js"></script>
    <script src="./node_modules/@gccn/activereportsjs/dist/ar-js-xlsx.js"></script>
    <script src="./node_modules/@gccn/activereportsjs/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 GCCN.ActiveReportsJS.ReportViewer.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 @gccn/activereportsjs
创建 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/@gccn/activereportsjs/styles/ar-js-ui.css" type="text/css">
        <link rel="stylesheet" href="./node_modules/@gccn/activereportsjs/styles/ar-js-designer.css" type="text/css">
        <script src="./node_modules/@gccn/activereportsjs/dist/ar-js-core.js"></script>
        <script src="./node_modules/@gccn/activereportsjs/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 GCCN.ActiveReportsJS.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/@gccn/activereportsjs/styles/ar-js-viewer.css" type="text/css">
<script src="./node_modules/@gccn/activereportsjs/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 GCCN.ActiveReportsJS.ReportDesigner.Designer("#designer");
        const viewer = new GCCN.ActiveReportsJS.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 页面, 将控件添加到设计界面，然后单击“预览”以预览设计的报表。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme