VueでActiveReportsJSを使用する

Vue(Vue.js)フレームワークで、ActiveReportsJSを使用する方法を説明します。

以下の手順では、Vue CLIのインストールをnpmを使用して行うため、事前にNodeJSがコンピュータにインストールされている必要があります。

コマンドプロンプトで次のコマンドを入力して、Vue CLIをインストールします。

npm install -g @vue/cli

Vueアプリケーションでビューワを表示し、レポートを開く方法について説明します。

1. コマンドプロンプトで次のコマンドを入力して、新しいVueアプリケーションを作成します。
   

vue create arjs-vue -d

2. 作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-vue

3. コマンドプロンプトで次のコマンドを入力して、ActiveReportsJSのVue対応パッケージをインストールします。

npm install @grapecity/activereports-vue

4. コマンドプロンプトで次のコマンドを入力して、ActiveReportsJSの日本語化パッケージをインストールします。

npm install @grapecity/activereports-localization

5. 表示するレポートをアプリケーションの'public'フォルダに配置します。ここでは、作成済のレポートとして、製品サンプルに含まれる'InvoiceList.rdlx-json'を使用します。

6. Vueアプリケーションの'src/App.vue'ファイルを開き、以下の内容を設定します。

<template>
    <div id="app" style="height: 600px">
        <GcArViewer ref="control"
            v-bind:zoom="reportZoom" viewMode="paginated" language="ja"
            v-bind:availableExports="['pdf', 'xlsx']"
            :report="{ Uri: 'InvoiceList.rdlx-json' }"/>
    </div>
</template>

<script>
    import Vue from 'vue';
    import '@grapecity/activereports/styles/ar-js-viewer.css';
    import '@grapecity/activereports-localization';
    import { Viewer} from '@grapecity/activereports-vue';
    import '@grapecity/activereports';

    export default Vue.extend ({
        name: 'app',
        components: {
            GcArViewer: Viewer
        },
        data: function () {
            return {
                reportZoom: 'FitToWidth',
            }
        }
    });
</script>

7. コマンドプロンプトで次のコマンドを入力して、Webサーバーを起動します。

npm run serve

8. ブラウザで'localhost:8080'を参照し、アプリケーションを表示します。