Vue.js & ActiveReportsJSクイックスタート

JavaScript帳票ライブラリ「ActiveReportsJS(アクティブレポートJS)」では、Angular、React、Vue.jsといった、主要なJavaScriptフレームワークに対応したパッケージをそれぞれ用意しています。今回はその中からVue.jsでActiveReportsJSを使う方法をご紹介いたします。

※ 以下、Node.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。また、エディタとしてVisual Studio Codeを使用します。

Vue CLIのインストール

Vue.jsのプロジェクトの作成やビルドには、コマンドラインツールの「Vue CLI」を使用します。

以下のコマンドをターミナルから実行してVue CLIをインストールします。
※ すでにインストール済みの場合、この手順は不要です。

npm install -g @vue/cli

次に以下のコマンドを実行し、「vue-reporting-app」という名前のプロジェクトを作成します。

vue create vue-reporting-app

プリセットの選択肢が表示されるので、「Vue 2」、または「Vue 3」のプリセットを選択してEnterをクリックします。
※ 手動で機能を選択する場合は一番下の「Manually select features」を選択してください。

デフォルトプリセットの選択

プロジェクトが作成されたら、以下のコマンドを実行し、プロジェクトのフォルダ配下に移動します。

cd vue-reporting-app

次に以下のコマンドを実行して開発サーバー上でアプリケーションが実行します。

npm run serve

ブラウザで「http://localhost:8080/」を参照すると以下のような画面が表示されます。また、ソースファイルを変更すると自動的に変更が反映されます。

Vue.jsアプリの起動

ActiveReportsJSのインストール

次に以下のコマンドを実行し、ActiveReportsJSのVue.js用のパッケージおよびビューワを日本語化するためのローカライズパッケージをインストールします。
※ 2021年10月時点の最新の日本語版「V2.1J」をインストールします。

npm install @grapecity/activereports-vue@2.1.0 @grapecity/activereports-localization@2.1.4

バージョンを指定せずに最新版をインストールする場合は以下のようにコマンドを実行します。

npm install @grapecity/activereports-vue @grapecity/activereports-localization

また、Vue 2を使用する場合は以下のパッケージも追加でインストールします。
※ ActiveReportsJS V2J以降は内部的に本パッケージを使用します。

npm install @vue/composition-api

package.jsonのdependenciesを見ると、インストールされたVue.jsやActiveReportsJSのバージョンが確認できます。以下はVue 3のプリセットを選択した場合の例です。

・・・(中略) 
 "dependencies": {
    "@grapecity/activereports-localization": "^2.1.4",
    "@grapecity/activereports-vue": "^2.1.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
・・・(中略)

App.vueの修正

次に「src/App.vue」ファイルを修正し、ActiveReportsJSの帳票ビューワの初期化処理やスタイルの設定を行っていきます。

まずは「template」タグの箇所を以下のように置き換え、ビューワの定義を行います。

<template>
  <div id="app">
    <GcArViewer
      ref="control"
      viewMode="paginated"
      language="ja"
      v-bind:availableExports="['pdf', 'xlsx', 'html']"
      :report="{ Uri: 'reports/Invoice_green_ipa.rdlx-json' }"
    />
  </div>
</template>

次に「script」タグの箇所を以下のように書き換え、モジュールのインポートやフォントの登録の処理を行います。
※ PDFエクスポートを行わない場合はフォントの登録は不要です。

<script>
import { Core } from "@grapecity/activereports";
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";

import { onMounted } from "vue";

export default {
  name: "App",
  components: {
    GcArViewer: Viewer,
  },
  setup() {
    onMounted(() => {
      Core.FontStore.registerFonts({
        name: 'IPAゴシック',
        source: 'fonts/ipag.ttf',
      });
    });
  },
};
</script>

Vue 2を使用する場合は以下のように設定して下さい。

<script>
import { Core } from "@grapecity/activereports";
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";
import Vue from "vue";

export default Vue.extend({
  name: "app",
  components: {
    GcArViewer: Viewer,
  },
  mounted: function () {
    Core.FontStore.registerFonts({
      name: "IPAゴシック",
      source: "fonts/ipag.ttf",
    });
  },
});
</script>

「style」タグの箇所を以下のように書き換え、ビューワのスタイルを定義します。

<style>
#app {
  height: 100vh;
}
</style>

レポートファイルとフォントファイルの配置

表示するレポートファイルは「public」フォルダ配下に配置します。また、PDFエクスポートを行う場合はフォントファイルも同フォルダ配下に配置します。

以下のGitHubで公開しているサンプルレポート(Invoice_green_ipa.rdlx-json)を「public/reports」フォルダに、フォントファイル(ipag.ttf)を「public/fonts」フォルダにそれぞれコピーして下さい。

静的ファイルの配置

アプリケーションの実行

以上でアプリケーションの作成は完了です。以下のコマンドを実行して、開発サーバー上でアプリケーションを起動します。

npm run serve

ブラウザで「http://localhost:8080/」を参照すると、ActiveReportsJSの帳票ビューワが表示され、作成した帳票の閲覧や、PDFなど各種形式への保存が実行できます。

おわりに

以上がVue.jsでActiveReportsJSを使用して帳票を出力する方法でした。ActiveReportsJSは今回ご紹介したVue.jsだけでなく、AngularやReactといったJavaScriptフレームワークでもご利用可能です。詳しくは以下の記事もご覧ください。

また、製品Webサイトでは、無料で試せるトライアル版も公開しています。
今回ご紹介できなかった帳票デザイナを含めたすべての機能が使用可能なほか、手元で動かして試せるサンプルも付属していますので、気になった方は是非一度お試しいただけますと幸いです。