GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

GrapeCity

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;

レポートファイルとフォントファイルの配置

表示するレポートファイルはpublicフォルダ配下に配置します。また、PDFエクスポートを行う場合はフォントファイルも同フォルダ配下に配置します。

以下のGitHubで公開しているサンプルレポート(Invoice_green_ipa.rdlx-json)をpublic/reportsフォルダに、フォントファイル(ipag.ttf)をpublic/fontsフォルダにそれぞれコピーして下さい。

レポートファイルとフォントファイルの配置

アプリケーションの実行

以上でアプリケーションの作成は完了です。以下のコマンドを実行して、ローカル環境でアプリケーションを実行します。

npm start

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

アプリケーションの実行

サイドバーからPDFなど各種形式へのエクスポートも実行可能です。

サイドバーからエクスポート

PDF出力結果

手軽に試せるデモアプリケーションを公開中

製品Webサイトでは、Reactでの使用方法を含めた、ActiveReportsJSの様々な機能をブラウザ上で手軽に試せるデモアプリケーションを公開しています。こちらもぜひご覧ください。

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品・技術資料をご覧ください。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。