ビューワの使用（Vue）
Vueアプリケーションを作成する
新しいVueアプリケーションを作成する簡単な方法はnpmパッケージのcreate-vueを使用することです。
create-vueを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。
create-vueをインストールするにはコマンドプロンプトで次のコマンドを入力してインストールします。
npm create vue@3上記コマンドは実行すると複数のプリセットの選択肢が表示されます。このトピックでは以下選択肢で作成します。
✔ Project name: … arjs-vue-viewer-app
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No
Scaffolding project in .arjs-vue-viewer-app...
Done.作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。
cd arjs-vue-viewer-app次のコマンドを入力してActiveReportsJSのVue対応パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。
npm install @mescius/activereportsjs-vue@5.2.3 @mescius/activereportsjs@5.2.5 @mescius/activereportsjs-i18n@5.2.5src\App.vueファイルを開き、以下の内容を設定します。
<template>
<div id="viewer-host">
<JSViewer v-bind:report="{ Uri: 'reports/quick-start-sample.rdlx-json' }" language="ja"></JSViewer>
</div>
</template>
<script lang="ts">
import { Viewer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs-i18n";
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/xlsxexport";
import "@mescius/activereportsjs/tabulardataexport";
export default {
name: "App",
components: {
JSViewer: Viewer,
},
};
</script>
<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-ui.css"></style>
<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css"></style>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>create-vueのテンプレートで設定されたスタイルは不要のため、src\main.tsファイルを開き、以下の内容を設定し、初期アプリケーションのスタイル（main.css）参照を削除します。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')public\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
次のコマンドを入力してVuerアプリケーションを実行します。
npm run devブラウザで「http://localhost:5173/」を参照し、アプリケーションを表示します。
上記手順でブラウザ上に表示したレポートをPDFエクスポートすると、エクスポートしたPDFにて文字化けが発生します。これはPDFにフォントが埋め込まれていないため発生します。
エクスポートしたPDFで日本語を表示するための詳細は以下のトピック、およびナレッジベースをご参照ください。