ActiveReportsJS Viewerの組み込み
ActiveReportsJS ViewerもWijmoと同様、SSR無効化が必要です。また、必須のCSSファイルを2つインポートします（リスト14）。
［リスト14］src/components/reports/ReportViewer.tsx（抜粋）
"use client";
// 必須のスタイルシート
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
const initViewer = async () => {
// 日本語ロケールを動的インポート
await import("@mescius/activereportsjs-i18n");
// Viewerモジュールを動的インポート
const ArViewer = await import("@mescius/activereportsjs/reportviewer");
// DOM要素にViewerをマウント
viewerRef.current = new ArViewer.Viewer(hostRef.current);
// レポート定義ファイルを開く
await viewerRef.current.open(reportUri);
};
@mescius/activereportsjs-i18nをインポートすることで、ViewerのUIが日本語化されます（図9）。
ViewerのツールバーからPDF出力や印刷が可能です。ページ送り、ズーム、検索といった機能も標準で備わっており、業務帳票の閲覧に必要な機能が揃っています。
まとめ
本記事では、Next.js + Firebase + Wijmo + ActiveReportsJSの4つの技術スタックを導入し、受発注管理システムの基盤を構築しました。SSR無効化のパターンは、両ライブラリで共通して適用できます。次回は、FirestoreのデータをActiveReportsJSにバインドし、WijmoのFlexGridで選択した行を帳票に表示する連携パターンを解説します。
