ビューワの組み込み（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 | 'default' | 'top' | 'bottom' | 'default' | パラメータパネルの表示位置を設定します。 |
| panelsLayout | 'sidebar' | 'toolbar' | 'toolbar' | 検索およびエクスポートのパネル位置を設定します。 |
| availableExports | string配列 'pdf' | 'xlsx' | 'html' | エクスポート設定を定義します。詳細については、エクスポート設定を参照してください。 | |
| 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 | ビューワでエラーが発生したときに呼び出されるイベントのハンドラを設定します。 |
上記のプロパティに動的な値をバインドして、ビューワのインターフェイスをカスタマイズすることができます。
また、親コンポーネントは、ビューワ参照を作成し、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();
},
});