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

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

npmからインストール

Vue対応パッケージはnpmを利用してインストールすることができます。

@grapecity/activereports-vueパッケージをプロジェクトにインストールすると、ビューワを使用できます。

Vue対応パッケージは@grapecity/activereportsパッケージに依存しており、Vue対応パッケージをインストールすると同時にインストールされます。

Vueのビューワ

Vueのビューワは、次のようにVue対応パッケージからインポートして、親コンポーネントのテンプレートに含めることができます。

import Vue from "vue";
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template: "<div style='width:100%;height: 100vh'><arjs-viewer /></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		ビューワに読み込むレポートを設定します。詳細については、レポートの読み込みを参照してください。
errorHandler	()=> void		ビューワでエラーが発生したときに呼び出されるイベントのハンドラを設定します。
showParametersOnOpen	'auto'\|'always'	'auto'	'always'に設定すると、レポートパラメータに初期値が設定されている場合でも、レポートの読込時にパラメータパネルが自動的に表示されます。

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

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

import Vue from "vue";
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template:
    "<div style='width:100%;height: 100vh'><arjs-viewer ref='reportViewer' /></div>",
  mounted: function () {
    this.$refs.reportViewer.Viewer().toggleFullScreen();
  },
});

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

npmからインストール

Vueのビューワ

関連トピック