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

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

npmからインストール

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

Vue対応パッケージは@grapecity/activereportsパッケージに依存しており、Vue対応パッケージをインストールすると同時にインストールされます。また、Vue 2.0を使用している場合は、@vue/composition-apiパッケージをインストールする必要があります。

Vueのデザイナ

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

import Vue from "vue";
import { Designer } from "@grapecity/activereports-vue";

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

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

プロパティ	設定値	説明
hotkeysEnabled	boolean	ファイルを開くおよび保存するショートカットを有効にするかどうかを示します。
language	string	デザイナコンポーネントの表示言語を設定します。詳細については、「表示言語を設定する」を参照してください。
fontSet	"default" \| "registered" \| "all"	利用可能なフォントを示します。
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	レポートオブジェクト	指定されたレポートをデザイナに読み込みます。

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

import Vue from "vue";
import { Designer } from "@grapecity/activereports-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"})
  },
});