ActiveReportsJSでブラウザ上にPDFを直接表示する

先日公開した記事では、帳票ビューワのサイドバーからレポートをPDFエクスポートする方法をご紹介しました。

この方法で出力されたPDFは、一旦クライアント環境に保存して開くことになりますが、要件によっては、保存せずにそのままブラウザ上にPDFを出力したい場合もあると思います。

今回はActiveReportsJSで作成したPDFをブラウザに直接表示する方法をご紹介したいと思います。

アプリケーションの作成

前述の記事で作成したアプリケーションをベースにします。
お急ぎの方はGitHubでソースコードを公開しているので、こちらをお使いください。

HTMLファイルの修正

index.htmlを以下のように書き換え、ビューワを使用せずにPDF出力用のボタンを配置します。

<body>
  <button onclick="runExport()" style="font-size: 3em;">PDF出力</button>
</body>

JSファイルの修正

index.jsを以下のように書き換え、exportDocumentメソッドが返却するBLOBオブジェクトからPDFを開きます。
なお、IEやChromium版でない旧Edgeでは、セキュリティの関係上、直接ブラウザには表示できませんのでご注意ください。

// IEで動作させる場合は以下も追加
import "@grapecity/activereports/dist/ie-polyfills";
import * as GCAR from "@grapecity/activereports";
import "@grapecity/activereports-localization";

// レポートファイル読込
import "./reports/invoice_green_ipa.rdlx-json";
import "./fonts/ipag.ttf";

window.runExport = function () {
  const pageReport = new GCAR.Core.PageReport();
  const pdfExport = GCAR.PdfExport;
  // フォント記述子の定義
  var IPAGothic = { name: "IPAゴシック", source: "./fonts/ipag.ttf" };
  const setting = { pdfVersion: "1.7", fonts: IPAGothic };

  pageReport
    .load("./reports/invoice_green_ipa.rdlx-json")
    .then(function () {
      return pageReport.run();
    })
    .then(function (pageDocument) {
      return pdfExport.exportDocument(pageDocument, setting);
    })
    .then(function (result) {
      if (window.navigator.msSaveOrOpenBlob) {
        // IE,Edgeの場合、保存ダイアログを開きます
        window.navigator.msSaveOrOpenBlob(result.data, "sample.pdf");
      } else {
        // PDF表示用のURLを生成し、別タブで開きます
        var url = URL.createObjectURL(result.data);
        window.open(url);
      }
    });
};

アプリケーションの実行

以下のコマンドを実行して、プロジェクトをビルドします。

npm run build

ビルド完了後、distフォルダにビルドされたファイルが出力されるので、Visual Studio Codeの拡張機能の「Live Server」を使用して実行します。

distフォルダ配下に生成されたindex.htmlを右クリックし、コンテキストメニューから「Open with Live Server」をクリックします。

Live Serverで実行

起動したブラウザ上の[PDF表示]ボタンをクリックすると、PDF形式で出力された帳票が別タブで開きます。

PDFをブラウザで表示

V1.2Jをリリース!

2020年5月27日にActiveReportsJSの最新サービスパック「V1.2J」をリリースしました。新しいコントロールの追加や、SVG形式の画像表示への対応など、様々な機能強化が行われていますので、こちらも是非チェックしてみて下さい。