ビューワの使用（Vue）
Vueアプリケーションを作成する
新しいVueアプリケーションを作成する簡単な方法はnpmパッケージのVue CLIを使用することです。事前にインストールされている必要があります。
次のコマンドを入力して、新しいVueアプリケーションを作成します。
vue create arjs-vue-viewer-app
npmパッケージをインストールする
Vue対応パッケージはnpmの@grapecity/activereports-vueパッケージに公開されています。このパッケージをインストールするには、アプリケーションのルートフォルダから次のコマンドを入力します。
npm install @grapecity/activereports-vue
Vue 2.0を使用する場合、@vue/composition-apiパッケージも合わせてインストールする必要があります。
npm install @vue/composition-api
また、ビューワを日本語で表示するため、ローカライズモジュールをインストールします。次のコマンドを入力します。
npm install @grapecity/activereports-localization
ビューワをアプリケーションに追加する
src\App.vueファイルを開き、以下の内容を設定します。
<template>
<div id="viewer-host">
<JSViewer :report="{ Uri: reportTemplate }" language="ja"></JSViewer>
</div>
</template>
<script>
import { Viewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports/htmlexport";
import "@grapecity/activereports/xlsxexport";
import "@grapecity/activereports-localization";
export default {
name: "App",
components: {
JSViewer: Viewer,
},
data: function () {
return {
reportTemplate: {
Type: "report",
Body: {
Name: "Body",
Type: "section",
ReportItems: [
{
Type: "textbox",
Name: "textbox1",
Style: { FontSize: "18pt" },
Value: "Hello, ActiveReportsJS Viewer",
Height: "10in",
},
],
},
Name: "Report",
},
};
},
};
</script>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>
アプリケーションを実行する
次のコマンドを入力してVueアプリケーションを実行します。ページ上に「Hello, ActiveReportsJS Viewer.」と書かれたレポートとビューワが表示されます。
ツールバーのボタンを使用したり、レポートをエクスポートしたりなど、基本的な機能を確認できます。
npm run serve