はじめに
帳票出力は、特に業務系のWebページで重要になる機能です。帳票出力はサーバーの処理で行うのが一般的ですが、グレープシティのJavaScriptライブラリ「ActiveReportsJS」を利用すると、サーバーの処理ではなく、WebブラウザのJavaScript処理で帳票を出力できます。
ActiveReportsJSでは、帳票をGUIでデザインできるWindows／Mac用の帳票デザイナアプリと、帳票デザイナで作成した帳票デザインをWebページで表示するビューワのJavaScriptライブラリが提供されます。ActiveReportsJSの概要は過去記事でも紹介しているので参考にしてください。
本連載では、ActiveReportsJSを初めて利用する人を対象として、帳票を出力するWebページをActiveReportsJSで作成する方法を、複数回にわたって説明していきます。初回となる今回はまず、ActiveReportsJSで実際に帳票を出力するまでの手順を、順を追って説明します。次に、帳票にデータを反映するデータソースとデータセットについて説明後、そのデータを帳票にリスト表示できるList、表に表示できるTableの各レポートコントロールについて、サンプルを挙げながら利用法を説明します。
対象読者
- Webページに帳票出力機能を実装したい方
- サーバー開発よりもフロントエンド開発が得意な方
- ActiveReportsJSの利用法を、順を追って学びたい方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。Node.jsは、ActiveReportsJSの動作に必ずしも必要ではありませんが、ローカルでWebサーバーを動作させるために利用しています。
Windows 10 64bit版
- ActiveReportsJS 1.2.0
- Microsoft Edge 83.0.478.37
- Node.js v12.17.0 64bit版
サンプルコードを動作させるには、ActiveReportsJSのトライアル版が必要になります。公式ページからダウンロードしてください。トライアル版のZipファイルから、distフォルダーの内容をサンプルコードのactivereportsjsフォルダーにコピーします。次に「npm install」コマンドを実行してライブラリをダウンロード後、「npm run start」コマンドを実行すると、Webブラウザが開いてWebページが表示されます。
なお、ActiveReportsJSはAngularやReact、Vue.jsなどのJavaScriptライブラリ／フレームワークと組み合わせての利用や、TypeScriptでの開発に対応していますが、本記事のサンプルコードはActiveReportsJSを単体で利用して、JavaScriptで開発しています。
