ビューワの使用（React）
Reactアプリケーションを作成する
新しいReactアプリケーションを作成する簡単な方法はパッケージランナーツールのcreate-react-appを使用することです。
次のコマンドを入力して、新しいReactアプリケーションを作成します。
npx create-react-app arjs-react-viewer-app
npmパッケージをインストールする
React対応パッケージはnpmの@grapecity/activereports-reactパッケージに公開されています。このパッケージをインストールするには、アプリケーションのルートフォルダから次のコマンドを入力します。
npm install @grapecity/activereports-react
また、ビューワを日本語で表示するため、ローカライズモジュールをインストールします。次のコマンドを入力します。
npm install @grapecity/activereports-localization
ビューワをアプリケーションに追加する
App.jsファイルを開き、以下の内容を設定します。typescriptを使用する場合はApp.tsファイルを開き、以下の内容を設定します。
import React from "react";
import "./App.css";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import { Viewer } from "@grapecity/activereports-react";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports/htmlexport";
import "@grapecity/activereports/xlsxexport";
import "@grapecity/activereports-localization";
const report = {
Type: "report",
Body: {
Name: "Body",
Type: "section",
ReportItems: [
{
Type: "textbox",
Name: "textbox1",
Style: { FontSize: "18pt" },
Value: "Hello, ActiveReportsJS Viewer",
Height: "10in",
},
],
},
Name: "Report",
};
function App() {
return (
<div id="viewer-host">
<Viewer report={{ Uri: report }} language="ja" />
</div>
);
}
export default App;
viewer-host要素のスタイルをindex.cssファイルに追加します。
#viewer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
アプリケーションを実行する
次のコマンドを入力してReactアプリケーションを実行します。ページ上に「Hello, ActiveReportsJS Viewer.」と書かれたレポートとビューワが表示されます。
ツールバーのボタンを使用したり、レポートをエクスポートしたりなど、基本的な機能を確認できます。
npm start