ActiveReportsJS/JavaScript/PDF

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

by GrapeCity_dev

先日公開した記事では、帳票ビューワのサイドバーからレポートを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形式の画像表示への対応など、様々な機能強化が行われていますので、こちらも是非チェックしてみて下さい。