デザイナの組み込み（Vue）

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

npmからインストール

Vue対応パッケージはnpmを利用してインストールすることができます。@mescius/activereportsjs-vueパッケージをプロジェクトにインストールすると、デザイナを使用できます。

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

Vueのデザイナ

Vueのデザイナは、次のように@mescius/activereportsjs-vueパッケージからインポートして、親コンポーネントのテンプレートに含めることができます。

import Vue from "vue";
import { Designer } from "@mescius/activereportsjs-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template: "<div style='width:100%;height: 100vh'><arjs-designer /></div>",
});

デザイナには、次のプロパティ・メソッドが用意されています。

プロパティ・メソッド	設定値	説明
onInit	()=>DesignerConfig	デザイナを初期化する時のオプションを含むDesignerConfigオブジェクトを返却します。使用方法は「カスタマイズ」を参照してください。
hotkeysEnabled	boolean	非推奨となりました。代わりに onInitコールバックを使用してください。このプロパティは将来的に廃止されます。
language	string	非推奨となりました。代わりに onInitコールバックを使用してください。このプロパティは将来的に廃止されます。
fontSet	"default" \| "registered" \| "all"	非推奨となりました。代わりに onInitコールバックを使用してください。このプロパティは将来的に廃止されます。
dataSources	DataSourceTemplatesの配列	事前定義されたデータソースとデータセットを設定します。
reportList	Report Resource Info itemsの配列	SubReportコントロールの［レポート名前］プロパティを設定します。
imageList	Image Resource Info itemsの配列	Imageコントロールの事前定義画像を設定します。
onCreate	onCreate関数	デザイナのツールバーに［新規作成］ボタンを追加し、対応するクリックハンドラを設定します。
onOpen	onOpen関数	ツールバーに［開く］ボタンを追加し、対応するクリックハンドラを設定します。
onRender	onRender関数	ツールバーに［プレビュー］ボタンを追加し、対応するクリックハンドラを設定します。
onSave	onSave関数	ツールバーに［保存］ボタンを追加し、対応するクリックハンドラを設定します。
onSaveAs	onSaveAs関数	ツールバーに［名前を付けて保存］ボタンを追加し、対応するクリックハンドラを設定します。
onOpenFileMenu	onOpenFileMenu関数	ツールバーに［ファイル］メニューを追加し、対応するクリックハンドラを設定します。
report	レポートオブジェクト	指定されたレポートをデザイナに読み込みます。
customInitTemplates		廃止されました。代わりに onInitコールバックを使用します。
documentChanged	(args: DocumentChangedEventArgs)=>void	デザイナに読み込まれたレポートが変更されたときに発生するイベントのハンドラを設定します。

また、親コンポーネントは、デザイナ参照を作成して、Designer クラスのgetReport、setReport、およびprocessCommandメソッドを使用できます。

import Vue from "vue";
import { Designer } from "@mescius/activereportsjs-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template:
    "<div style='width:100%;height: 100vh'><arjs-designer ref='reportDesigner' /></div>",
  mounted: function () {
    this.$refs.reportDesigner.setReport({id: "report.rdlx-json"})
  },
});