New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@grapecity/activereports

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@grapecity/activereports

ActiveReportsJS

2.0.0-beta.217
npm

Version published: 4 years ago

Weekly downloads: 6.2K; decreased by-8.13%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

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

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>

if IE11 support is needed, in 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>

If exports support is needed, in 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>

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>

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

Initialize empty repository npm init
Install required components npm install @grapecity/activereports
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>

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>

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>

Now open index.html in browser and start designing report.

Add ability to Preview reports using ActiveReportsJS Viewer

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>

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>

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

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>

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 应用

操作步骤

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

如果需要支持 IE11 , 也需要在 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项目中

第一个 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 页面, 将控件添加到设计界面，然后单击“预览”以预览设计的报表。

Keywords

FAQs

What is @grapecity/activereports?

Is @grapecity/activereports popular?

Is @grapecity/activereports well maintained?

Package last updated on 02 Nov 2020

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

Installation

Documentation

Samples

ActiveReportsJS Viewer

Creating your first ActiveReportsJS Viewer application

Steps

ActiveReportsJS Designer

Creating your first ActiveReportsJS Designer application

Steps

Add ability to Preview reports using ActiveReportsJS Viewer

ActiveReportsJS JP

サンプル

インストール方法

ドキュメント

製品情報

ActiveReportsJS CN

安装

产品资料

示例

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

操作步骤

设计器

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

步骤

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

Keywords

Related posts

CISA Brings KEV Data to GitHub

Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy

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