ActiveReportsJS: Installation

ActiveReportsJS consists of the cross-platform Report Designer Application and a set of JavaScript libraries. This page describes each component and explains how to install it.

Installation package

ActiveReportsJS provides installation packages for Windows, macOS, and Desktop Linux. Download the package for your operating system and extract the archive.

Standalone Report Designer Application

The Standalone Report Designer is a cross-platform desktop application built with Electron that you can use to create and edit reports. For more information, see the Report Author Guide.

The installer is located in the designer folder of the installation package.

A 30-day evaluation version is available.

Core library

This library contains the core functionality of ActiveReportsJS and exposes several types that you can use in your application code.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-core.js script from the dist folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-core.js

PDF Export library

This library lets you export reports to PDF. For more information, see the Export Reports page.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package, which includes the PDF export functionality, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-pdf.js script from the dist folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-pdf.js

HTML Export library

This library lets you export reports to HTML. For more information, see the Export Reports page.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package, which includes the HTML export functionality, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-html.js script from the dist folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-html.js

Tabular Data Export library

This library lets you export reports to tabular data (CSV) format. For more information, see the Export Reports page.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package, which includes the tabular data export functionality, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-tabular-data.js script from the dist folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-tabular-data.js

Advanced Excel Export library

This library lets you export reports to Excel (XLSX) format. For more information, see the Export Reports page.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package, which includes the advanced Excel export functionality, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-xlsxAdv.js script from the dist folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-xlsxAdv.js

Report Viewer Library

This library contains the JavaScript Report Viewer component.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package, which includes the Report Viewer component, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-viewer.js script from the dist folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-viewer.js

Report Designer Library

This library contains the JavaScript Report Designer component.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package, which includes the Report Designer component, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-designer.js script from the dist folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-designer.js

Angular NPM package

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

To use these components in an Angular application, add the @mescius/activereportsjs-angular npm package to your application's dependencies.

For step-by-step tutorials, see Get Started with Angular Report Viewer and Get Started with Angular Report Designer.

React NPM package

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

To use these components in a React application, add the @mescius/activereportsjs-react npm package to your application's dependencies.

For step-by-step tutorials, see Get Started with React Report Viewer and Get Started with React Report Designer.

Vue NPM package

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

To use these components in a Vue application, add the @mescius/activereportsjs-vue npm package to your application's dependencies.

For step-by-step tutorials, see Get Started with Vue Report Viewer and Get Started with Vue Report Designer.

Svelte NPM package

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

To use these components in a Svelte application, add the @mescius/activereportsjs-svelte npm package to your application's dependencies.

For step-by-step tutorials, see Get Started with Svelte Report Viewer and Get Started with Svelte Report Designer.

Report Viewer Localization Library

ActiveReportsJS includes translations of the Report Viewer user interface into Chinese, Japanese, Korean, Dutch, German, Italian, and Brazilian Portuguese.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs-i18n npm package, which includes these translations, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-locales.js script from the dist/locales folder of the installation package.

The script is also available from the CDN:

https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/ar-js-locales.js

Report Designer Localization Library

ActiveReportsJS includes translations of the Report Designer user interface into French, Italian, Chinese, Japanese, and Korean.

If your application uses plain JavaScript without a bundler, reference the fr-locale.js, it-locale.js, ja-locale.js, ko-locale.js, or zh-locale.js scripts from the dist/locales/designer folder of the installation package.

These scripts are also available from the CDN:

Report Viewer UI themes

ActiveReportsJS includes several predefined color themes for the Report Viewer component. For more information, see the Report Viewer Themes page.

If your application is built with a module bundler such as webpack, add the @mescius/activereportsjs npm package, which includes these themes, to the dependencies section of the package.json file.

If your application uses plain JavaScript without a bundler, reference the ar-js-ui.css and ar-js-viewer.css stylesheets from the styles folder of the installation package.

These stylesheets are also available from the CDN:

Report Designer UI themes

ActiveReportsJS includes several predefined color themes for the Report Designer component. For more information, see the Report Designer Themes page.

If your application uses plain JavaScript without a bundler, reference the ar-js-ui.css and ar-js-designer.css stylesheets from the styles folder of the installation package.

These stylesheets are also available from the CDN:

ActiveReportsJS CLI Tool

The ActiveReportsJS CLI is a command-line toolkit that helps you manage and maintain ActiveReportsJS projects. It currently automates project migration, and more commands are planned for future releases.

You can run the CLI with npx, without installing it first:

npx @mescius/activereportsjs-cli <command>

Available Commands

migrate

The migrate command automates the move from the legacy @grapecity packages to the current @mescius packages. Use it to upgrade existing projects to the latest version of ActiveReportsJS.

When you run this command, the tool does the following:

Package updates: Uninstalls the legacy @grapecity packages and installs the corresponding @mescius packages.
Code refactoring: Updates imports and code identifiers throughout your project, for example, replacing GC.ActiveReports with MESCIUS.ActiveReportsJS.
Safety backup: Before applying any changes, copies every file it modifies to a mescius-backup directory.

help

Displays help for the CLI or for a specific command.

npx @mescius/activereportsjs-cli help [command]

Options

Option	Description
`-v, --version`	Displays the version of the CLI tool.
`-h, --help`	Displays help for the tool and its commands.