[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Webデザイナコンポーネントの使用（Vue）

Vueアプリケーションを作成する

新しいVueアプリケーションを作成する簡単な方法はnpmパッケージのVue CLIを使用することです。事前にインストールされている必要があります。
次のコマンドを入力して、新しいVueアプリケーションを作成します。

vue create arjs-designer-app

npmパッケージをインストールする

VueアプリケーションでWebデザイナコンポーネントを使用するには@grapecity/activereportsパッケージに含まれるWebデザイナコンポーネントを使用します。このパッケージをインストールするには、アプリケーションのルートフォルダから次のコマンドを入力します。

npm install @grapecity/activereports

また、Webデザイナコンポーネントを日本語で表示するため、ローカライズモジュールをインストールします。次のコマンドを入力します。

npm install @grapecity/activereports-localization

Webデザイナコンポーネントのホストコンポーネントを追加する

Vueアプリケーションのsrc￥componentsフォルダにDesignerHost.vueファイルを追加し、次のコードを設定します。

<template>
  <div id="designer-host"></div>
</template>

<script>
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import '@grapecity/activereports-localization-ja';
export default {
  name: "DesignerHost",
  mounted: function() {
    new ReportDesigner("#designer-host", { language: "ja" });
  },
};
</script>

<style scoped>
#designer-host {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}
</style>

このコンポーネントはマウントされ、ホスト要素が利用可能になると、Webデザイナコンポーネントを初期化します。

Webデザイナコンポーネントをアプリケーションに追加する

src\App.vueファイルのtemplateとscriptを変更して、次のコードを追加します。

<template>
  <div id="app">
    <DesignerHost />
  </div>
</template>

<script>
import DesignerHost from "./components/DesignerHost.vue";

export default {
  name: "App",
  components: {
    DesignerHost,
  },
};
</script>

src\main.jsに必要なスタイルをインポートします。

import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";

アプリケーションを実行して表示する

次のコマンドを入力してVueアプリケーションを実行します。ページ上にWebデザイナコンポーネントが表示されます。レポートに、コントロールの追加、プロパティの設定、データソースを作成するなど、基本的な機能を確認できます。

npm run serve

関連トピック