Demo
Docs
Theme Editor
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.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.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 or Yarn

ActiveReportsJS is represented on npm and Yarn with activereports.* package in the @grapecity scope, where the @grapecity/activereports represents the package of the library. As with any npm package, you need to have Node.js (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

To install packages from Yarn, you need to have Yarn (https://yarnpkg.com/lang/en/) installed on your computer. The package can then be installed by executing the command:

   yarn add @grapecity/activereports

Note: If you install Yarn using installer, you need to have Node.js installed to be able to use yarn commands.

To install framework-specific packages, use this command:

   npm install @grapecity/activereports-{framework}

or

   yarn add @grapecity/activereports-{framework}

where {framework} can take one of the following values: angular, react, or vue.

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.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
    • 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';