クライアントサイドでPDFを生成できる「pdfmake」を使ってみる

JavaScript

ユーザー毎で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のドキュメントを確認してみてください。

【参考】