ビューワの組み込み（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>
  );
}

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

プロパティ	型	デフォルト値	説明
language	string	'en'	ビューワの表示言語を設定します。詳細については、表示言語を設定するを参照してください。
toolbarVisible	boolean	true	ツールバーを表示するかを設定します。
sidebarVisible	boolean	true	サイドバーを表示するかを設定します。
parameterPanelLocation	'auto' \| 'default' \| 'top' \| 'bottom'	'auto'	パラメータパネルの表示位置を設定します。
panelsLayout	'sidebar' \| 'toolbar'	'toolbar'	検索およびエクスポートのパネル位置を設定します。
availableExports	string配列 'pdf' \| 'xlsx' \| 'html' \| 'tabular-data'		エクスポート設定を定義します。詳細については、エクスポート設定を参照してください。
exportSettings	object		エクスポート設定を定義します。詳細については、エクスポート設定を参照してください。
toolbarLayout	Object		ツールバー設定を定義します。詳細については、ツールバーのカスタマイズを参照してください。
mouseMode	'Pan' \| 'Selection'	'Pan'	ビューワのマウスモードを設定します。
zoom	'FitWidth' \| 'FitPage' \| number	100	レポートの表示倍率を設定します。
fullscreen	boolean	false	Trueに設定されている場合、ビューワをフルスクリーンで表示します。
viewMode	'Continuous' \| 'SinglePage'	'Continuous'	複数ページのレポートを表示するモードを設定します。
renderMode	'Galley' \| 'Paginated'	'Paginated'	ビューワの描画モードを設定します。
report	Object		ビューワに読み込むレポートを設定します。詳細については、レポートの読み込みを参照してください。
reportLoaded	(args: ReportLoadedEventArgs)=>void		ビューワにレポートを読み込み、レンダリングが開始される前に発生するイベントのハンドラを設定します。
documentLoaded	(args: DocumentLoadedEventArgs)=>void		レポートのレンダリングが完了した時に発生するイベントのハンドラを設定します。
errorHandler	()=> void		ビューワでエラーが発生したときに呼び出されるイベントのハンドラを設定します。
showParametersOnOpen	'auto' \| 'always'	'auto'	'always'に設定すると、レポートパラメータに初期値が設定されている場合でも、レポートの読込時にパラメータパネルが自動的に表示されます。

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

また、親コンポーネントは、ビューワ参照を作成し、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>
  );
}

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

npmからインストール

Reactのビューワ

関連トピック