インストール
ActiveReportsJSは、クロスプラットフォームのデザイナアプリケーション、およびいくつかのJavaScriptライブラリから構成されています。 このトピックでは、各コンポーネントの概要とそのインストール手順について説明します。
インストールするパッケージ
Windows 、 macOS のパッケージを提供しています。使用しているOSに対応するパッケージをダウンロードして、アーカイブを抽出します。
レポートを作成するデザイナアプリ
デザイナアプリは、Electronで構築されたクロスプラットフォームのデスクトップアプリケーションであり、レポートの作成に使用できます。 詳細については、レポート作成者ガイド を参照してください。
インストーラは、ダウンロードしたインストールパッケージのdesignerフォルダにあります。
製品をインストール後30日間、製品評価を目的にご利用頂けます。
コアライブラリ
このライブラリにはコア機能が含まれ、アプリケーションのコード内で使用できるいくつかの 型 を公開しています。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。 この場合、 package.jsonファイルの依存関係リストに@grapecity/activereportsのnpmパッケージを追加することができます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのdistフォルダにあるar-js-core.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-core.js
PDFエクスポートライブラリ
このライブラリには、レポートをPDFでエクスポートするコードが含まれています。詳細については、エクスポート を参照してください。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。 この場合、 package.jsonファイルの依存関係リストにPDFエクスポート機能を含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのdistフォルダにあるar-js-pdf.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-pdf.js
XLSXエクスポートライブラリ
このライブラリには、レポートをXLSX形式でエクスポートするコードが含まれています。詳細については、エクスポート を参照してください。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。 この場合、package.jsonファイルの依存関係リストにXLSXエクスポート機能を含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのdistフォルダにあるar-js-xlsx.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-xlsx.js
HTMLエクスポートライブラリ
このライブラリには、レポートをHTML形式でエクスポートするコードが含まれています。詳細については、エクスポート を参照してください。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。 この場合、package.jsonファイルの依存関係リストにHTMLエクスポート機能を含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージの distフォルダーにあるar-js-html.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-html.js
CSVデータエクスポートライブラリ
このライブラリには、レポートをCSVデータ(CSV)形式でエクスポートするコードが含まれています。詳細については、エクスポート を参照してください。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。 この場合、package.jsonファイルの依存関係リストにCSVデータエクスポート機能を含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージの distフォルダーにあるar-js-tabular-data.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-tabular-data.js
帳票ビューワ
このライブラリには、帳票ビューワコンポーネントが含まれています。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。この場合、package.jsonファイルの依存関係リストにビューワコンポーネントを含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのdistフォルダにあるar-js-viewer.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-viewer.js
Angular用の帳票ビューワ
このライブラリには、Angular用の帳票ビューワコンポーネントが含まれています。
Angularアプリケーションで使用するには、package.jsonファイルの依存関係リストに@grapecity/activereports-angularのnpmパッケージを追加します。
Angular用の帳票ビューワについては、Angularを参照してください。
React用の帳票ビューワ
このライブラリには、React用の帳票ビューワコンポーネントが含まれています。
Reactアプリケーションで使用するには、package.jsonファイルの依存関係リストに@grapecity/activereports-reactのnpmパッケージを追加します。
React用の帳票ビューワについては、Reactを参照してください。
Vue用の帳票ビューワ
このライブラリには、Vue用の帳票ビューワコンポーネントが含まれています。
Vueアプリケーションで使用するには、package.jsonファイルの依存関係リストに@grapecity/activereports-vueのnpmパッケージを追加します。
Vue用の帳票ビューワについては、Vueを参照してください。
Webデザイナコンポーネント
このライブラリには、Webデザイナコンポーネントが含まれています。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。この場合、 package.jsonファイルの依存関係リストに、Webデザイナコンポーネントを含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのdistフォルダにあるar-js-designer.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-designer.js
帳票ビューワのローカライゼーションライブラリ
ActiveReportsJSには、ビューワのUIを中国語と日本語で表示するローカライゼーションモジュールが含まれています。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。この場合、package.jsonファイルの依存関係リストに、言語用のリソースを含む@grapecity/activereports-localizationのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのdist\localesフォルダにあるar-js-locales.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/locales/ar-js-locales.js
帳票デザイナのローカライゼーションライブラリ
ActiveReportsJSには、デザイナのUIを中国語と日本語で表示するローカライゼーションモジュールが含まれています。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。この場合、package.jsonファイルの依存関係リストに、言語用のリソースを含む@grapecity/activereports-localizationのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのdist\locales\designerフォルダにあるja-locale.jsおよびzh-locale.jsスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/locales/designer/ja-locale.js
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/locales/designer/zh-locale.js
帳票ビューワのUIテーマ
ActiveReportsJSには、帳票ビューワコンポーネント用のさまざまなUIテーマが用意されています。詳細については、テーマを参照してください。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。この場合、package.jsonファイルの依存関係リストに、帳票ビューワのテーマを含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのstylesフォルダにある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、およびlight-blue-viewer.cssスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-viewer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-viewer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-viewer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-viewer.css
帳票デザイナのUIテーマ
ActiveReportsJSには、レポートデザイナコンポーネント用のさまざまなUIテーマが用意されています。詳細については、テーマを参照してください。
webpackなどのモジュールバンドラーを使用してコンパイルするアプリケーションでActiveReportsJSを使用する場合があるとします。この場合、package.jsonファイルの依存関係リストに、帳票デザイナのテーマを含む@grapecity/activereportsのnpmパッケージを追加できます。
PureJSアプリケーションには、ダウンロードしたインストールパッケージのstylesフォルダにあるar-js-ui.css、ar-js-viewer.css、dark-yellow-ui.css、dark-yellow-designer.css、green-ui.css、green-designer.css、light-blue-ui.css、およびlight-blue-designer.cssスクリプトへの参照を含めることができます。
または、このスクリプトはCDNから入手できます。
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-designer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-designer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-designer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-designer.css