ビューワの組み込み（React）
このトピックではReactフレームワークでビューワを使用する際のラッパーコンポーネントであるReact対応パッケージについて説明します。React対応パッケージからビューワをWebアプリケーションに組み込む方法については、クイックスタート > ビューワの使用 > Reactを参照してください。
npmからインストール
React対応パッケージはnpmを利用してインストールすることができます。
@mescius/activereportsjs-reactパッケージをプロジェクトにインストールすると、ビューワを使用できます。
React対応パッケージは@mescius/activereportsパッケージに依存しており、React対応パッケージをインストールすると同時にインストールされます。
Reactのビューワ
Reactのビューワは、次のようにJSX（TSX）ファイルにインポートして、コンポーネントのレンダリングツリーに含めることができます。
import { Viewer as ReportViewer } from "@mescius/activereportsjs-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 "@mescius/activereportsjs-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>
);
}