[{"id":"e0909540-8bde-4587-bb4d-02445746db2a","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"464b8e03-462d-4aed-8818-05d32ec3bf00","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"75b66fd4-b740-443d-bc6e-1782048b60a6","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"fd5d021d-0210-4d74-ba42-1a39ef14a385","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"a20f26ac-cd31-4e4d-9454-1e035b0f1587","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"7fce7040-1bb1-4a61-9fb7-2e19d569de50","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"f235557b-9781-471f-bf03-38bae6e3e953","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"c8c7b5d5-f5bd-4b68-a12f-3aae9804a844","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"dde44832-bb5c-45f3-8ebf-3badbc613cd9","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"a0c823ed-e22b-493b-aded-4d201c0fa480","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"2f064d57-b088-4bc5-a628-4e0d7e1a0c65","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"577a09da-dea1-42db-812f-4eeaa9274ece","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"0eb72dd3-8f8f-4039-93a8-500bbde2301e","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"3f2ea860-c764-43d8-ae3f-6e3b0314ce67","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"3604b8ce-1da0-413f-8274-7df0f7173573","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"f290406b-ced1-4c52-abad-979160a79f6b","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"d19bc9cd-ff53-4b0d-ab7e-a68c1497c4c6","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"ac046cee-82b9-4edf-a642-ae6d7cb21ebf","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"81eb70e8-f770-4384-9167-bc7c755ad052","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"1864834b-08ce-43f1-891b-c3cca6e04e95","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"f96cfec1-420c-4ca7-ab0a-cab482731073","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"d0dff477-9f56-483a-a9fc-cab648905b41","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"548568fe-dbd1-4da5-a489-d9b3edf75329","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"27658163-a479-432f-a192-dbed286beb3e","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"793a62d7-460d-4699-9304-edb2941268ac","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"8ddd80d5-886f-41b8-8e3f-f73aa8146c8d","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"43de3664-261b-4cf9-9945-fb519251f4c7","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"94759fce-692f-4779-b5f3-fce5c58f242c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"2d6ebfad-f7d1-4cc5-8ba1-fdace3472056","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]}]
DEMO DOCS THEME EDITOR API
DOWNLOAD
(Showing Draft Content)

ActiveReportsJS: Installation

ActiveReportsJS consists 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

ActiveReportsJS offers Windows, macOS, and Desktop 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 the downloaded installation package.

Alternatively, this script is available via the CDN reference:

https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.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, which 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.mescius.com/activereportsjs/4.latest/dist/ar-js-pdf.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, which 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.mescius.com/activereportsjs/4.latest/dist/ar-js-html.js

Tabular Data Export library

This library contains the code that allows exporting reports to Tabular Data(CSV) 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, which includes the Tabular Data Export functionality, to the dependencies list in the package.json file.

A pure JavaScript application can include the reference to the ar-js-tabular-data.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.mescius.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js

Report Viewer Library

This library contains the JavaScript 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, which 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.mescius.com/activereportsjs/4.latest/dist/ar-js-viewer.js

Report Designer Library

This library contains the JavaScript 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, which 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.mescius.com/activereportsjs/4.latest/dist/ar-js-designer.js

Angular NPM package

This package contains the Angular Report Viewer and Angular Report Designer components.

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

Visit the Get Started with Angular Report Viewer and Get Started with Angular Report Designer pages for basic tutorials.

React NPM package

This package contains the React Report Viewer and React Report Designer components.

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

Visit Get Started with React Report Viewer and Get Started with React Deport Designer pages for basic tutorials.

Vue NPM package

This package contains the Vue Report Viewer and React Report Designer components.

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

Visit Get Started with Vue Report Viewer and Get Started with Vue Deport Designer pages for basic tutorials.

Report Viewer Localization Library

ActiveReportsJS includes translations of the Report Viewer User Interface to Chinese, Japanese, Korean, Dutch, German, Italian, and Brazilian Portuguese 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.mescius.com/activereportsjs/4.latest/dist/locales/ar-js-locales.js

Report Designer Localization Library

ActiveReportsJS includes translations of the Report Designer User Interface to Chinese, Korean, 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, ko-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: