Demos
Docs
API
More Samples
Download
Getting Started
Referencing ActiveReportsJS
V1
V1

Referencing ActiveReportsJS

Reference to css and scripts that are required to be added in ActiveReportsJS application are:

  • Minimum requirement:

    • ar-js-viewer.css
    • ar-js-core.js
    • ar-js-viewer.js

  • If using export components:

    • ar-js-pdf.js
    • ar-js-xlsx.js
    • ar-js-html.js

Referencing ActiveReportsJS locally

Download the ActiveReportsJS package and copy the files to a folder within your application. To reference a file, include a script tag in the HTML page with a path to the file location.

Example:

<head>
     <title>ActiveReportsJS</title>
     <meta charset="utf-8" />

     <link rel="stylesheet" href="css/ar-js-viewer.css" />
     <script type="text/javascript" src="scripts/ie-polyfills.full.js"></script> <!--to run in IE-->
     <script type="text/javascript" src="scripts/ar-js-core.js"></script>
     <script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
     <script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
     <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
     <script type="text/javascript" src="scripts/ar-js-html.js"></script>
</head>
<body>
...
</body>

The ActiveReportsJS package is available for download from the website: https://www.grapecity.com/download/activereportsjs

Referencing ActiveReportsJS from CDN

Using CDN reference, you can reference ActiveReportsJS in your application without download. The ActiveReportsJS files are hosted on cdn.grapecity.com. To reference a file from CDN, include a script tag in the HTML page a url for the file.

Example:

<head>
     <title>ActiveReportsJS</title>
     <meta charset="utf-8" />

     <link rel="stylesheet" href="http://cdn.grapecity.com/activereportsjs/1.0.0/styles/ar-js-viewer.css" />
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ie-polyfills.full.js"></script> <!--to run in IE-->
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-core.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-viewer.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-pdf.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-xlsx.js"></script>
     <script type="text/javascript" src="http://cdn.grapecity.com/activereportsjs/1.0.0/dist/ar-js-html.js"></script>
</head>
<body>
...
</body>

Referencing ActiveReportsJS from NPM

ActiveReportsJS is represented on npm with activereports.* package in the @grapecity npm scope, where the @grapecity/activereports represents the package of the library. As with any npm package, you need to have NodeJS (https://nodejs.org/en/) installed on your computer to use it.

The latest release version can be installed from npm by executing the command: 

`npm install @grapecity/activereports`

Structure of @grapecity/activereports bundle

The single @grapecity/activereports package bundles all available modules as:

  • readme.md
  • license.md
  • package.json
  • index.js
  • index.d.ts
  • dist
    • ar-js-core.js
    • ar-js-html.js
    • ar-js-pdf.js
    • ar-js-viewer.js
    • ar-js-xlsx.js
    • ie-polyfills.full.js
  • styles
    • ar-js-viewer.css
    • dark-yellow.css
    • green.css
    • light-blue.css
  • lib
    • node_modules > @grapecity
      • ar-js-html.d.ts
      • ar-js-html.js
      • ar-js-pagereport.d.ts
      • ar-js-pagereport.js
      • ar-js-pdf.d.ts
      • ar-js-pdf.js
      • ar-js-viewer.d.ts
      • ar-js-viewer.js
      • ar-js-xlsx.d.ts
      • ar-js-xlsx.js
      • en-locale.json
      • ie-polyfills.full.js
    • ar-js-core.d.ts
    • ar-js-html.d.ts
    • ar-js-pdf.d.ts
    • ar-js-viewer.d.ts
    • ar-js-xlsx.d.ts
  • core
    • index.js
    • index.d.ts
  • viewer
    • index.d.ts
    • index.js
  • pdfexport
    • index.d.ts
    • index.js
  • xlsxexport
    • index.d.ts
    • index.js
  • htmlexport
    • index.d.ts
    • index.js

Using @grapecity/activereports bundle

Use import statements as follows to use ActiveReportsJS modules:

  • as complete package which imports all modules:
  import * as arjs from '@grapecity/activereports'; 
  // or...
  import { Viewer, Core, PdfExport} from '@grapecity/activereports';
  • as explicit modules to reduce the bundle size:
  import * as Core from '@grapecity/activereports/core';
  import { Viewer } from '@grapecity/activereports/viewer';