ビューワの組み込み（React）

このトピックではReactフレームワークでビューワを使用する際のラッパーコンポーネントであるReact対応パッケージについて説明します。React対応パッケージからビューワをWebアプリケーションに組み込む方法については、クイックスタート > ビューワの使用 > Reactを参照してください。

npmからインストール

React対応パッケージはnpmを利用してインストールすることができます。
@grapecity/activereports-reactパッケージをプロジェクトにインストールすると、ビューワを使用できます。
React対応パッケージは@grapecity/activereportsパッケージに依存しており、React対応パッケージをインストールすると同時にインストールされます。

Reactのビューワ

Reactのビューワは、次のようにJSX（TSX）ファイルにインポートして、コンポーネントのレンダリングツリーに含めることができます。

import { Viewer as ReportViewer } from "@grapecity/activereports-react";
function App() {
  return (
    <div>
      <ReportViewer />
    </div>
  );
}

ビューワには、次のプロパティが用意されています。

上記のプロパティに動的な値をバインドして、ビューワのインターフェイスをカスタマイズすることができます。

また、親コンポーネントは、ビューワ参照を作成し、Viewerプロパティを使用してメソッドとプロパティにアクセスできます。

import { Viewer as ReportViewer } from "@grapecity/activereports-react";
function App() {
  const viewerRef = React.createRef();
  const btnClick = function () {
    viewerRef.current.Viewer.toggleFullScreen();
  };
  return (
    <div id="viewer-host">
      <button type="button" onClick={btnClick}>
        Full Screen
      </button>
      <ReportViewer ref={viewerRef} />
    </div>
  );
}

関連トピック

• 表示言語を設定する
• レポートの読み込み
• エクスポートについて
• 印刷
• テーマ
• ツールバーのカスタマイズ
• クイックスタート[デモ]