pdfMakeはフロント側でPDFが簡単に作れるJavaScriptです。
クライアントのPCでPDFが作れるのでサーバいらず。
日本語フォントだけ別途用意する必要があるので少し面倒ですが、それ以外の操作は簡単です。
GitHub上でも5000スターを超えており、人気の様子がうかがえます。
pdfMakeの単位はmm(ミリ)じゃないよ
A4のように、メジャーなサイズはあらかじめ用意されているため、
let pageSize = 'a4' let docDefinition = { pageSize:pageSize, pageMargins:[0,0,0,0], content:content }
のように簡単に指定できます。
しかしちょっと変わったサイズ、特に日本独自のサイズを指定するとおかしなサイズになります。
例えばハガキは100*148mm なので、
let pageSize = { width:100, height:148 }
とやると残念な結果になります。
1pt = 0.35278mm
pdfMakeで使われている単位はなんと「us pt」というもので、これは1pt = 0.35278mmになります。
なかなかわかりにくい落とし穴です。
よって pdfMakeでハガキサイズを指定するには
// ハガキサイズの指定 100 * 148mm let hagakiSize = { width:283.46, height:419.52 } // おまけ 長3封筒 120*235mm let naga3Size = { width:340.16, height:666.14 } // さらにおまけ 長4封筒 90*205mm let naga4Size = { width:255.12, height:581.10 }
となります。
まぁざっくり3倍くらいになるわけです。
SPAでPDFが作れるのは便利
フロントでPDFが作れるので、SPAなんかと相性がいいです。
実際にReinというPWAに組み込んでみたところちゃんと動いてくれました。
CSSでの印刷もチャレンジしましたがやっぱりCSSは限界がありますね。ブラウザによってヘッダーやフッターの制御ができず、URLや日付が入ってしまうなど、実用的なレベルにはできませんでした。その点、PDFは崩れることもなく、きれいに印刷できるので良いです。
実際にPdf Makeで作って印刷してみた結果は、Reinのページに紹介しています。
実際のPDFファイルのサンプルはこちらからどうぞ
使用した日本語フォントはg_えんぴつ楷書(有料版)を使わせてもらいました。
かっこいいフォントです。そしてたった2,000円で買えるので超リーズナブル。さらに商用利用可能です。