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