先日公開した記事では、帳票ビューワのサイドバーからレポートを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」をクリックします。
起動したブラウザ上の[PDF表示]ボタンをクリックすると、PDF形式で出力された帳票が別タブで開きます。
V1.2Jをリリース!
2020年5月27日にActiveReportsJSの最新サービスパック「V1.2J」をリリースしました。新しいコントロールの追加や、SVG形式の画像表示への対応など、様々な機能強化が行われていますので、こちらも是非チェックしてみて下さい。