ユーザー毎でPDFの内容を変更したい場合など、サーバーサイドでPDFを生成することがあります。
ただ、この方法だとアクセスするたびにPDFを生成する形になるため、サーバーに負荷がかかってしまう問題があります。
そこで今回は、クライアントサイドでPDFを生成できる「pdfmake」を使って、PDFを生成してみたいと思います。
使い方
GitHubのページからファイルのダウンロードを行います。
色々なファイルが含まれていますが、今回はbuildディレクトリにある下記ファイルを使用します。
- pdfmake.min.js
- vfs_fonts.js
pdfmake.min.jsがpdfmakeの本体、vfs_fonts.jsがフォントファイルになります。
HTMLに上記2ファイルを読み込む記述を追加します。
■HTML
<script src="pdfmake.min.js"></script> <script src="vfs_fonts.js"></script>
次に、PDFで表示する内容を定義します。
今回は「This is an sample PDF printed with pdfMake」という文章を表示させてみます。
■JavaScript
var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };
最後に、PDFを表示するボタンを配置します。
■HTML
<button onClick="pdfMake.createPdf(docDefinition).open();">PDFを開く</button>
これでボタンをクリックしたときにPDFが生成されるようになりました。
今回のサンプルではPDFを開くようにしましたが、印刷や保存も行えます。
■JavaScript
// PDFを開く
pdfMake.createPdf(docDefinition).open();
// PDFを印刷する
pdfMake.createPdf(docDefinition).print();
// PDFをダウンロードする
pdfMake.createPdf(docDefinition).download('ファイル名.pdf');
カスタムフォントを使用する
pdfmakeはデフォルトのフォントがRobotoのため、日本語には対応していません。
カスタムフォントとして日本語フォントを使うことで、日本語も表示できるようになります。
vfs_fonts.jsの生成
最初にダウンロードしたファイルにpackage.jsonが入っていますので、必要なパッケージをインストールします。
※Gruntを使用していますので、あらかじめ環境を用意しておいてください。
npm install
examples/fonts に使いたいフォントを追加します。
今回は源真ゴシックを使用しました。
準備が完了したら下記タスクを実行します。
grunt dump_dir
examples/fonts内のフォントを含んだvfs_fonts.jsがbuildディレクトリに新しく生成されました。
フォント指定の追加
先ほどのサンプルを修正して、PDFに日本語を表示してみます。
まず、vfs_fonts.jsを新しく生成したファイルに差し替えます。
次に、PDFの内容を定義する記述の前に、font familyを定義します。
■JavaScript
pdfMake.fonts = {
GenShinGothic: {
normal: 'GenShinGothic-Medium.ttf'
}
}
最後に、PDFの内容を日本語の文章に変更して、使用するフォントの指定を追加します。
■JavaScript
var docDefinition = {
content: [
'株式会社 TAM (タム)',
'ユーザー理解をクライアントと共有し、',
'企業のビジネス目的を共に達成するパートナー型デジタルプロダクションです。'
],
defaultStyle: {
font: 'GenShinGothic'
}
}
これで日本語も表示できるようになりました。
pdfmakeでは他にもテーブルや画像、リストなどのレイアウトも使用できるようです。
詳しくはpdfmakeのドキュメントを確認してみてください。
【参考】