PDF/Excel/HTMLエクスポート
ActiveReportsJSでは、Viewer UIを使わずにプログラマティックに帳票をエクスポートできます。PDF・Excel・HTMLの3形式に対応しており、それぞれ専用モジュールを動的インポートして使用します（リスト7）。
const handleExport = async (format: "pdf" | "xlsx" | "html", filename: string) => {
// ActiveReportsJSのコアモジュールを動的インポート
const Core = await import("@mescius/activereportsjs/core");
const pageReport = new Core.PageReport();
// データバインディングが必要な場合はレポート定義を加工して読み込む
if (data) {
// レポート定義JSONを取得
const response = await fetch(reportUri);
const reportDef = await response.json();
// データソースの接続文字列にJSONデータを直接埋め込む
if (reportDef.DataSources && reportDef.DataSources.length > 0) {
reportDef.DataSources[0].ConnectionProperties.ConnectString =
"jsondata=" + JSON.stringify(data);
}
// 加工済みの定義オブジェクトを読み込む
await pageReport.load(reportDef);
} else {
// データ不要の場合はURIから直接読み込む
await pageReport.load(reportUri);
}
// レポートを実行してページドキュメントを生成
const pageDocument = await pageReport.run();
// 指定された形式でエクスポートしてダウンロード
if (format === "pdf") {
const PdfExport = await import("@mescius/activereportsjs/pdfexport");
const result = await PdfExport.exportDocument(pageDocument, {
info: { title: filename },
});
result.download(${filename}.pdf);
} else if (format === "xlsx") {
const XlsxExport = await import("@mescius/activereportsjs/xlsxexport");
const result = await XlsxExport.exportDocument(pageDocument);
result.download(${filename}.xlsx);
} else {
const HtmlExport = await import("@mescius/activereportsjs/htmlexport");
const result = await HtmlExport.exportDocument(pageDocument);
result.download(${filename}.html);
}
};
エクスポートの流れは、PageReportでレポートを読み込み → run()で実行 → 各形式のexportDocument()でエクスポート → download()でダウンロード、という4ステップです。
if (data)ブロックでは、プログラマティック実行時にデータを帳票に注入する処理を行っています。Viewerで表示する場合はデータソース設定に基づいてデータが自動的に取得されますが、PageReportで直接実行する場合は、レポート定義JSONを取得したうえでデータソースのConnectStringに"jsondata=" + JSON.stringify(data)を設定し、実行時データを埋め込む必要があります。
図7は、エクスポートボタンを配置した画面です。
前節でDesignerを使って編集・保存した請求書レポートも、このエクスポート機能を通じてPDFやExcelとして出力できます。Designerでレイアウトを調整し、エクスポートで配布用ファイルを生成する、という一連の業務フローがアプリケーション内で完結します。
まとめ
本記事では、ActiveReportsJS Designerの組み込みを中心に、帳票開発を効率化する機能を解説しました。
-
Designer組み込み:
@mescius/activereportsjs/reportdesignerから直接インスタンス化し、setActionHandlersで保存機能を実装 -
レポートパーツ: 共通のヘッダー・フッターをライブラリ化し、
setReportPartsLibrariesで複数帳票から再利用 -
マスターレポート: 共通レイアウトをテンプレート化し、
.rdlx-json-masterとして管理 -
エクスポート:
PageReport→run()→exportDocument()でPDF/Excel/HTMLをプログラマティックに生成
全3回のシリーズを通じて、Firebase + Next.js + Wijmo + ActiveReportsJSによる業務システムの構築手順を解説してきました。
最終的に構築したシステムでは、開発者がWijmoとActiveReportsJSで業務UIと帳票の基盤を作り、現場担当者がDesignerで帳票レイアウトを自分で調整できる、という役割分担が実現しています。本番運用に向けては、レポート定義の永続化先（データベースやクラウドストレージ）の検討や、Designerの編集権限管理などが追加で必要になるでしょう。
サンプルコードは本記事の添付ファイルからダウンロードできます。ぜひ手元で動かして、帳票開発の効率化を体験してみてください。
