デザイナの組み込み（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>",
});

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

また、親コンポーネントは、デザイナ参照を作成して、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"})
  },
});