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

1.2.0
npm

Version published: 5 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.

Tutorial - 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 from styles folder:

    <link rel="stylesheet" type="text/css" href="/styles/ar-js-viewer.css">

    <script src="/dist/ar-js-core.js"></script>
    <script src="/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="/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="/dist/ar-js-pdf.js"></script>
    <script src="/dist/ar-js-html.js"></script>
    <script src="/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>

Designer

To create and modify reports, you will need ActiveReportsJS Designer. Download the ActiveReportsJS designer here for MacOS, Win, or Linux, to get started.

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 :

    <link rel="stylesheet" type="text/css" href="/styles/ar-js-viewer.css">

    <script src="/dist/ar-js-core.js"></script>
    <script src="/dist/ar-js-viewer.js"></script>

如果需要支持 IE11 , 也需要在 index.html head标签内添加ie-polyfills.js文件 (具体位置要在 ar-js-core.js 和 ar-js-viewer.js文件前面引用)

    <script src="/dist/ie-polyfills.js"></script>

如果需要支持导出按钮，需要添加 ar-js-pdf.js, ar-js-html.js 及 ar-js-xlsx.js dist 文件夹的引用:

    <script src="/dist/ar-js-pdf.js"></script>
    <script src="/dist/ar-js-html.js"></script>
    <script src="/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>

设计器

我们提供了 Windows,Mac,Linux 三个版本的设计器报表设计器 ActiveReportsJS Designer。下载设计器

Keywords

FAQs

What is @grapecity/activereports?

Is @grapecity/activereports popular?

Is @grapecity/activereports well maintained?

Package last updated on 03 Apr 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

Tutorial - Creating your first ActiveReportsJS Viewer application

Steps

Designer

ActiveReportsJS JP

サンプル

インストール方法

ドキュメント

製品情報

ActiveReportsJS CN

安装

产品资料

示例

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

操作步骤

设计器

Keywords

Related posts

CISA Brings KEV Data to GitHub

Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy