ReactでActiveReportsJSを使用する

Reactフレームワークで、ActiveReportsJSを使用する方法を説明します。

以下の手順では、create-react-appのインストールをnpmを使用して行うため、事前にNodeJSがコンピュータにインストールされている必要があります。

コマンドプロンプトで次のコマンドを入力して、create-react-appをインストールします。

npm install create-react-app -g

Reactアプリケーションでビューワを表示し、レポートを開く方法について説明します。

1. コマンドプロンプトで次のコマンドを入力して、新しいReactアプリケーションを作成します。

create-react-app arjs-react

2. 作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-react

3. コマンドプロンプトで次のコマンドを入力して、ActiveReportsJSのReact対応パッケージをインストールします。

npm install @grapecity/activereports-react

4. コマンドプロンプトで次のコマンドを入力して、ActiveReportsJSの日本語化パッケージをインストールします。

npm install @grapecity/activereports-localization

5. 表示するレポートをアプリケーションの'public'フォルダに配置します。ここでは、作成済のレポートとして、製品サンプルに含まれる'InvoiceList.rdlx-json'を使用します。

6. Reactアプリケーションの'src/App.js'ファイルを開き、以下の内容を設定します。

import React from 'react';
import '@grapecity/activereports/styles/ar-js-viewer.css';
import '@grapecity/activereports-localization';
import { Viewer } from '@grapecity/activereports-react';
import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

class App extends React.Component {
    _viewer = Viewer;

    render() {
        return (<div className='demo-app' style={{ height: '1000px'}} >
                    <Viewer
                     report={{ Uri: "InvoiceList.rdlx-json" }}
                     sidebarVisible={true}
                     toolbarVisible={false}
                     language='ja' />
                </div>);
    }
}
export default App;

7. コマンドプロンプトで次のコマンドを入力して、Webサーバーを起動します。

npm start

8. ブラウザで'localhost:3000'を参照し、アプリケーションを表示します。