はじめに
グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバー側処理ではなく、WebブラウザのJavaScript処理で帳票を出力できるライブラリです。本連載では、ActiveReportsJSの活用法を複数回に分けて紹介しています。
2020年12月に、ActiveReportsJSの新バージョンV2Jがリリースされ、さまざまな新機能が追加されました。すべての新機能はActiveReportsJSの公式ページで紹介されています。前回記事ではこのうち、データソース関連の新機能を紹介しました。
今回紹介するActiveReportsJS V2Jの新機能は、レイヤー機能です。これはレポートに複数のレイヤーを定義してレポートコントロールを振り分けられる機能です。レポートを画面表示・印刷・エクスポートする際に、各レイヤーの表示と非表示を切り替えられるため、例えば印刷時にだけ特定の表示を追加・削除するといったことができます。
本記事では、ActiveReportsJSのレイヤー機能について、サンプルとともに説明していきます。
対象読者
- Webページに帳票出力機能を実装したい方
- テンプレートが印刷された用紙に内容だけをはめ込み印刷したい方
- 帳票の印刷やエクスポート時に、画面とは異なる表示を行いたい方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。Node.jsは、ActiveReportsJSの動作に必ずしも必要ではありませんが、ローカルでWebサーバーを動作させるために利用しています。
Windows 10 64bit版
- ActiveReportsJS V2J
- Microsoft Edge 88.0.705.63
- Node.js v14.15.4 64bit版
サンプルコードを動作させるには、ActiveReportsJSのトライアル版が必要になります。公式ページからダウンロードしてください。トライアル版のZipファイルから、distフォルダーの内容をサンプルコードのactivereportsjsフォルダーにコピーします。次に「npm install」コマンドを実行してライブラリをダウンロード後、「npm run start」コマンドを実行すると、Webブラウザが開いてWebページが表示されます。
ActiveReportsJSのエクスポート機能
レイヤー機能を説明する前に、ActiveReportsJSのエクスポート機能について簡単に説明します。ActiveReportsJSでは、帳票をExcel・HTML・PDFファイルにエクスポートできます。エクスポート機能を利用するには、各ファイル形式に対応するエクスポート機能のJavaScriptファイルを、HTMLのhead要素内で参照します。
<head> （略） <script src="activereportsjs/scripts/ar-js-xlsx.js"></script><!-- Excel --> <script src="activereportsjs/scripts/ar-js-pdf.js"></script><!-- PDF --> <script src="activereportsjs/scripts/ar-js-html.js"></script><!-- HTML --> （略） </head>
リスト1の通り参照すると、帳票表示画面の左側にエクスポートボタンが表示され、帳票をエクスポートできるようになります。
なお、日本語を含む帳票をPDFファイルにエクスポートする場合、ページロード時のJavaScript処理でActiveReportsJSに日本語フォントを設定する必要があります（リスト2）。（1）でフォントを定義して、（2）のFontStore.registerFontsメソッドでフォントを登録します。registerFontsメソッドは非同期に実行されるため、戻り値promiseのthenメソッド（3）で、フォント登録完了後の処理（ここではビューワを生成してレポートファイルを開く処理）を記述します。
window.addEventListener('load', function() {
// PDFエクスポート用のフォントを定義 ...（1）
const font = {
name: 'IPAexGothic', // フォント名
source: 'fonts/ipaexg.ttf', // フォントファイル
useAsDefault: true // PDFエクスポート時のデフォルトフォントにする
};
// 定義したフォントを登録 ...（2）
GC.ActiveReports.Core.FontStore.registerFonts(font)
// フォント登録完了時に以下を実行 ...（3）
.then(() => {
// ビューワを生成
const viewer = new ActiveReports.Viewer('#viewer', {language: 'ja'});
// ビューワでレポートファイルを開く
viewer.open('p001-basic.rdlx-json');
});
}, false);
本記事のサンプルでは、PDFエクスポート用の日本語フォントとして、fontsフォルダーにIPAexゴシックのフォントファイルipaexg.ttfを配置して利用しています。
