2024年9月10日にリリースされたJavaScriptスプレッドシートライブラリ「SpreadJS（スプレッドJS）」の最新バージョン「V17.1J」では、さまざまなレイアウトの帳票が開発できる「レポートシート」機能を追加しました。
このシリーズでは、レポートシートについて、基本的な使い方や便利な応用例などをご紹介します。今回はレポートシートの印刷と、ExcelやPDFといったファイル形式へのエクスポートの方法についてです。
目次
レポートシートを印刷する
レポートシートで作成した帳票はSpreadJSが提供するAPIを使用して印刷を実行することが可能です。以下の第1回の記事で作成したレポートシートのアプリケーションをベースに実装方法を解説していきます。アプリケーションはこちらからダウンロード可能です。
印刷ボタンを追加する
それではレポートシートの印刷を行う処理を実装したボタンを前回作成した帳票アプリケーション上に追加してみます。
「index.html」を以下のように追記し、［印刷］ボタンを追加します。
・・・（中略）・・・
<body>
<div class="buttonContainer">
<button class="button" id="print">印刷</button>
</div>
<div class="show-area">
<div id="ss"></div>
</div>
</body>
・・・（中略）・・・加えて「scripts/app.js」を以下のように追記し、［印刷］ボタン押下時にprintメソッドを実行する処理を記載します。
document.addEventListener("DOMContentLoaded", () => {
・・・（中略）・・・
const printButton = document.getElementById('print');
・・・（中略）・・・
//------------------------------------------
// 印刷ボタン押下時の処理
//------------------------------------------
printButton.onclick = function () {
spread.print();
}
・・・（中略）・・・また、追加するボタンのスタイルも定義します。
・・・（中略）・・・
.button{
font-size: 16px;
margin: 5px 0px 0px 15px;
}実行するとレポートシートの上部に［印刷］ボタンが追加されます。
［印刷］ボタンを押下するとレポートシートで作成した帳票を印刷することができます。
レポートシートをExcelエクスポートする
SpreadJSは高い精度のExcel入出力機能を提供しているライブラリですが、レポートシートで作成した帳票も同機能を使用してExcelエクスポートすることが可能です。
Excelエクスポートボタンを追加する
先ほどの印刷と同様に「index.html」に［Excelエクスポート］ボタンを追加します。また、クライアント環境にファイルを保存する機能を実装するために「FileSaver.js」の参照も追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
・・・（中略）・・・
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
・・・（中略）・・・
</head>
<body>
<div class="buttonContainer">
<button class="button" id="print">印刷</button>
<button class="button export" id="excel">Excelエクスポート</button>
</div>
<div class="show-area">
<div id="ss"></div>
</div>
</body>
・・・（中略）・・・加えて「scripts/app.js」を以下のように追記し、［Excelエクスポート］ボタン押下時にexportメソッドと、「FileSaver.js」のsaveAsメソッドを実行する処理を記載します。
document.addEventListener("DOMContentLoaded", () => {
・・・（中略）・・・
const excelButton = document.getElementById('excel');
・・・（中略）・・・
//------------------------------------------
// Excelエクスポートボタン押下時の処理
//------------------------------------------
excelButton.onclick = function () {
spread.export(function (blob) { saveAs(blob, 'products.xlsx'); }, function (error) {
console.log(error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
})
}
・・・（中略）・・・また、追加するボタンのスタイルも定義します。
・・・（中略）・・・
.button.export{
margin: 5px 0px 0px 5px;
}実行するとレポートシートの上部に［Excelエクスポート］ボタンが追加されます。
［Excelエクスポート］ボタンを押下するとレポートシートで作成した帳票をExcel（xlsx）形式で保存することができます。
レポートシートをPDFエクスポートする
PDFは帳票の保存形式としてポピュラーな形式ですが、レポートシートで作成した帳票はPDFエクスポートすることも可能です。
フォントの埋め込み設定を行う
レポートシートをPDFエクスポートする際に注意が必要なのはフォントの設定です。SpreadJSが標準でサポートしているフォントファミリはCourier、Times-Roman、Helveticaなど日本語に対応していないフォントなので、PDFで正しく日本語を出力するには、PDFFontsManagerを使用してあらかじめ日本語フォントを登録する必要があります。詳しくは以下の記事をご覧ください。
前回作成したサンプルではフォントの設定を行っていなかったので、デザイナから各項目のフォントを「IPAexゴシック」に変更します。フォントは以下より入手可能です。
また、プロジェクト配下に「fonts」フォルダを作成し、PDFに埋め込むフォントファイルを配置します。
「scripts/app.js」を以下のように追記し、埋め込むフォントファイルの登録を行います。
document.addEventListener("DOMContentLoaded", () => {
・・・（中略）・・・
//------------------------------------------
// PDFエクスポートに必要なフォントを登録します
//------------------------------------------
registerFont("IPAexゴシック", "normal", "fonts/ipaexg.ttf");
//------------------------------------------
// フォントファイルの読み込み
//------------------------------------------
function registerFont(name, type, fontPath) {
var xhr = new XMLHttpRequest();
xhr.open('GET', fontPath, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
if (this.status == 200) {
var fontArrayBuffer = this.response;
var fonts = {};
fonts[type] = fontArrayBuffer;
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont(name, fonts);
}
};
xhr.send();
}
・・・（中略）・・・PDFエクスポートボタンを追加する
フォントの設定が完了したらPDF出力処理を実装した［PDFエクスポート］ボタンを追加していきます。「index.html」を以下のように追記します。
・・・（中略）・・・
<body>
<div class="buttonContainer">
<button class="button" id="print">印刷</button>
<button class="button export" id="excel">Excelエクスポート</button>
<button class="button export" id="pdf">PDFエクスポート</button>
</div>
・・・（中略）・・・さらに「scripts/app.js」を以下のように追記し、［PDFエクスポート］ボタン押下時にsavePDFメソッドを実行する処理を記載します。
document.addEventListener("DOMContentLoaded", () => {
・・・（中略）・・・
const pdfButton = document.getElementById('pdf');
・・・（中略）・・・
//------------------------------------------
// PDF出力ボタン押下時の処理
//------------------------------------------
pdfButton.onclick = function () {
spread.savePDF(function (blob) {
saveAs(blob, 'products.pdf');
}, function (error) {
console.log(error);
}, {
title: '商品一覧',
author: 'Test Author',
subject: 'Test Subject',
keywords: 'Test Keywords',
creator: 'Test Creator'
})
}
・・・（中略）・・・実行するとレポートシートの上部に［PDFエクスポート］ボタンが追加されます。
［PDFエクスポート］ボタンを押下するとレポートシートで作成した帳票をPDF形式で保存することができます。
また、以下のようにコードを書き換えることで出力したPDFを直接ブラウザのタブで開くこともできます。
・・・（中略）・・・
//------------------------------------------
// PDF出力ボタン押下時の処理
//------------------------------------------
pdfButton.onclick = function () {
spread.savePDF(function (blob) {
//saveAs(blob, 'products.pdf');
const url = URL.createObjectURL(blob);
window.open(url);
}, function (error) {
・・・（中略）・・・上記のように変更後に［PDFエクスポート］ボタンを押下すると、出力したPDFを直接ブラウザで開くことができます。
今回作成したアプリケーションはこちらからダウンロード可能です。
さいごに
今回はSpreadJSの「レポートシート」で帳票開発に必須の印刷と各種形式へのエクスポートを行う方法をご紹介しました。レポートシートを使用することで、SpreadJSを使用した帳票開発が格段に楽になりますので、是非お試しいただけますと幸いです。
なお、今回ご紹介した内容はレポートシート機能のほんの一部です。本シリーズでは引き続きレポートシートのさまざまな機能をご紹介していくほか、弊社Webサイトには、レポートシートで作成した数々の帳票サンプルが確認できるデモアプリケーションや、無料のトライアル版がございますので、こちらもご確認ください。