[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

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

'default' | 'top' | 'bottom'

'default'

パラメータパネルの表示位置を設定します。

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


ビューワでエラーが発生したときに呼び出されるイベントのハンドラを設定します。

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


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

関連トピック