React & ActiveReportsJSクイックスタート

「ActiveReportsJS（アクティブレポートJS）」では、Angular、React、Vue.jsといった、主要なJavaScriptフレームワークに対応したパッケージをそれぞれ用意しています。今回はその中からReactでActiveReportsJSを使う方法をご紹介いたします。

※ 以下、Node.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。また、エディタとしてVisual Studio Codeを使用します。

Create React Appのインストール

まずはReactアプリ開発環境の構築などが簡単にできるコマンドラインツール「Create React App」をインストールします。

ターミナルやコマンドプロンプトを開き、以下のコマンドを実行して、Create React Appパッケージをグローバルにインストールします。
※ すでにインストール済みの場合、この手順は不要です。

npm install -g create-react-app

create-react-appコマンドを実行して、Reactアプリケーションを作成します。少し待つと、アプリケーションのソースファイルや設定ファイルが自動生成され、パッケージがインストールされます。

create-react-app react-reporting-app

作成されたアプリケーションプロジェクトのフォルダに移動して、npm startコマンドを実行すると、開発サーバー上でアプリケーションが実行されます。

cd  react-reporting-app
npm start

ブラウザでhttp://localhost:3000を開くと以下のようなページが表示されます。

Reactアプリケーションの実行

ActiveReportsJSのパッケージのインストール

以下のコマンドを実行して、ActiveReportsJSのパッケージをアプリケーションにインストールします。

npm install @grapecity/activereports-react

続いて以下のコマンドを実行して、ActiveReportsJSの日本語化パッケージをアプリケーションにインストールします。

npm install @grapecity/activereports-localization

ソースコードの修正

src/App.jsを以下のように書き換えます。

import React, { useEffect } from "react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import { Core } from "@grapecity/activereports";
import { Viewer } from "@grapecity/activereports-react";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports/htmlexport";
import "@grapecity/activereports/xlsxexport";
import "@grapecity/activereports-localization";

function App(){

    useEffect(() => {
        Core.FontStore.registerFonts(
            {
                name: 'IPAゴシック',
                source: 'fonts/ipag.ttf'
            }
        );
    });

    return (
        <div id="viewer-host"  style={{ height: '100vh'}}>
            <Viewer
            report={{ Uri: "reports/Invoice_green_ipa.rdlx-json" }}
            sidebarVisible={true}
            toolbarVisible={true}
            language='ja' />
        </div>
    );
}
export default App;