@grapecity/activereports

ActiveReportsJS

1.0.0
npm

Version published: 5 years ago

Maintainers: 1

Created: 5 years ago

Source

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.full.js from dist folder:

    <script src="/dist/ie-polyfills.full.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: 100%"></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: 100%"></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.

Keywords

FAQs

What is @grapecity/activereports?

Is @grapecity/activereports well maintained?

Package last updated on 19 Aug 2019

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