ActiveReportsJSでエクスポートしたPDFをDioDocs PDFビューワに表示する方法 – MESCIUS ナレッジベース

作成日: 2024/08/27 最終更新日: 2024/08/27

文書種別

使用方法

詳細

ActiveReportsJSとDioDocs PDFビューワを組み合わせると、レポートをPDFにエクスポートした結果をブラウザに表示できます。

まず、両者のライブラリをnpmから取得します。

npm install @mescius/activereportsjs@5.0.3 @mescius/dspdfviewer@7.1.3

ActiveReportsJSのexportDocumentメソッドはPDFのBlobを返します。
これをバイナリデータに変換し、PDFビューワのopenメソッドに渡すことでPDFを表示できます。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>ActiveReportsJS DioDocs PDF Viewer</title>
 <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-core.js"></script>
 <script type="text/javascript" src="./node_modules/@mescius/activereportsjs/dist/ar-js-pdf.js"></script>
 <script type="text/javascript" src="./node_modules/@mescius/dspdfviewer/dspdfviewer.js"></script>
</head>
<body>
 <div id="viewer"></div>
 <script>
  window.onload = async function(){
   const Core = MESCIUS.ActiveReportsJS.Core;
   const PdfExport = MESCIUS.ActiveReportsJS.PdfExport;

   // PDFに埋め込むフォントを登録
   const fonts = [
    {name: 'IPAゴシック', source: './fonts/ipag.ttc', postscriptName: 'IPAGothic'},
    {name: 'IPA明朝', source: './fonts/ipam.ttc', postscriptName: 'IPAMincho'}
   ];
   await Core.FontStore.registerFonts(...fonts);

   // PDFエクスポート
   const pageReport = new Core.PageReport();
   await pageReport.load("./reports/sample.rdlx-json");
   const pageDocument = await pageReport.run();
   const result = await PdfExport.exportDocument(pageDocument);

   // 出力結果をバイナリデータに変換
   const arrayBuffer = await result.data.arrayBuffer();

   // DioDocs PDFビューワで開く
   const viewer = new DsPdfViewer('#viewer');
   viewer.addDefaultPanels();
   viewer.open(arrayBuffer);
  }
 </script>
</body>
</html>

ナレッジベース

文書種別

詳細

関連記事