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