v2.0.0
v2.0.0v1.2.0

ActiveReportsJS: Installation

ActiveReportsJS comprises of the cross-platform designer application and several JavaScript libraries. This page provides an overview of these components and installation instructions for each of them.

Installation package

We provide Windows, macOS, and Linux installation packages. Download the package for your operating system and extract the archive.

Standalone Report Designer Application

The standalone report designer is the cross-platform desktop application built with Electron. You can use the standalone designer to build reports. Visit the Report Author Guide for more information.

The installer resides in the designer folder of the downloaded installation package.

You can try out the evaluation version for 30 days.

Core library

This library contains the core functionality and exposes several types that you can use within an application's code.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-core.js script that you can find in the dist folder of of the downloaded installation package.

Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js

Polyfill library

This library contains the supplemental code that is required to get ActiveReportsJS components worked within Internet Explorer 11.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes the polyfill library, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ie-polyfills.js script that you can find in the dist folder of the downloaded installation package.

Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/ie-polyfills.js

PDF Export library

This library contains the code that allows exporting reports to PDF format. Visit Export Reports page for more information on this topic.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes the PDF Export functionality, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-pdf.js script that you can find in the dist folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js

XLSX Export library

This library contains the code that allows exporting reports to XLSX format.Visit Export Reports page for more information on this topic.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes the XLSX Export functionality, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-xlsx.js script that you can find in the dist folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js

HTML Export library

This library contains the code that allows exporting reports to HTML format.Visit Export Reports page for more information on this topic.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes the HTML Export functionality, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-html.js script that you can find in the dist folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js

Report Viewer

This library contains the Report Viewer component.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes the Report Viewer component, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-viewer.js script that you can find in the dist folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js

Angular Report Viewer

This library contains the Angular Report Viewer component.

To use in an Angular application, add the @grapecity/activereports-angular NPM package to the dependencies list in the package.json file.

Visit Getting Started page for a quick start with the Angular Report Viewer

React Report Viewer

This library contains the React Report Viewer component.

To use in a React application, add the @grapecity/activereports-react NPM package to the dependencies list in the package.json file.

Visit Getting Started page for a quick start with the React Report Viewer

Vue Report Viewer

This library contains the Vue Report Viewer component.

To use in a Vue application, add the @grapecity/activereports-vue NPM package to the dependencies list in the package.json file.

Visit Getting Started page for a quick start with the Vue Report Viewer

Report Designer

This library contains the Report Designer component.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes the Report Designer component, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-designer.js script that you can find in the dist folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js

Report Viewer Localization Library

ActiveReportsJS includes translations of the Report Viewer User Interface to Chinese and Japanese languages.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports-localization NPM package, that includes these translations, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-locales.js script that you can find in the dist\locales folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: https://cdn.grapecity.com/activereportsjs/2.latest/dist/locales/ar-js-locales.js

Report Designer Localization Library

ActiveReportsJS includes translations of the Report Designer User Interface to Chinese and Japanese languages.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports-localization NPM package, that includes these translations, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ja-locale.js and zh-locale.js scripts that you can find in the dist\locales\designer folder of the downloaded installation package. Alternatively, these scripts are available via the CDN references:

Report Viewer UI themes

ActiveReportsJS includes several UI themes for the Report Viewer component. Visit the Report Viewer Themes page for more information.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes these themes, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to ar-js-ui.css, ar-js-viewer.css, dark-yellow-ui.css, dark-yellow-viewer.css, green-ui.css, green-viewer.css, light-blue-ui.css, and light-blue-viewer.css styles that you can find in the styles folder of the downloaded installation package. Alternatively, these scripts are available via the CDN reference:

Report Designer UI themes

ActiveReportsJS includes several UI themes for the Report Designer component. Visit the Report Designer Themes page for more information.

Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as webpack. In that case, you can add the @grapecity/activereports NPM package, that includes these themes, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to ar-js-ui.css, ar-js-designer.css, dark-yellow-ui.css, dark-yellow-designer.css, green-ui.css, green-designer.css, light-blue-ui.css, and light-blue-designer.css styles that you can find in the styles folder of the downloaded installation package. Alternatively, these scripts are available via the CDN reference: