JavascriptでPDFを作成するライブラリまとめと比較

2020-09-25T02:54:21+09:00

はじめまして。
PDFの作成サービスを個人で運用しており、数万ページのPDFを作成しており、JavascriptでのPDFの作成ライブラリを作ったりでそれなりに詳しくなってきたのでこの記事を作成しました。笑

Javascriptで扱えるPDFのライブラリーはいくつかあります。しかし、実際どれを使えばいいのかわかりにくいので、それらを比較しながら紹介していきます。

UMDモジュールとして提供されていて、近年のフロントエンド(TypeScript/Webpack/React/etc.)で扱いやすい？Nodeとブラウザーで動く？型はあるか？日本語フォントは使えるのか？という観点でも比較していきます。

この記事ではJavascriptで扱えるPDF作成ライブラリーで「どれを採用するか」ということで悩んでいる時に、用途に合ったライブラリを発見することができるようにします。

PDFKit

PDFKitはJavascriptでPDFを作成するライブラリの元祖的存在。 フォントの埋め込みや画像の埋め込みもできます。開発が2012年から行われており古いですが、今でもメンテナンスが行われております。多少複雑ですがNodeだけでなく、 Webpackを利用してブラウザで動かすことも可能です。

下記に紹介するライブラリでもPDFKitのラッパーとして作成されたものや、プログラムを参考にしているものもあり、フォントの埋め込みも含めてJavascriptでPDF作成を行うというパワープレーを最初に成し遂げたライブラリと言うだけあってすごいライブラリです。

よくない点をあげるなら、高レベルのAPIを提供していないで操作に慣れるまでに一定の学習が必要です。最初はデザインがしづらく、記述が複雑になりがちです。

ポイント	評価
Nodeとブラウザーで動く	△(若干手間)
型はあるか	○(DefinitelyTyped)
日本語フォントは使えるのか	○(ブラウザで使う場合は要注意)
使いやすさ	△プログラムの手続きが複雑

pdfmake

公式サイト:http://pdfmake.org/

上記で紹介したPDFKitのラッパーとして作成されたのがpdfmakeです。 PDFKitとの違いはPDFKitが命令的なプログラミング操作のAPIを提供しているのに対して、pdfmakeは宣言的でレイアウトによる計算をpdfmakeが行ってくれるためプログラムが比較的少なくなります。

PDFKitの改良版としてGithubでのスター数はpdfmakeの方が多く、Web上でも様々な使い方や例があり、人気のライブラリということがわかります。また、画像の埋め込みはもちろん、QRコード,SVGのレンダリングなどの機能もあります。

実際にPDFkitと比較した時にその使いやすさから本サービスのlabelmake.jpも当初はpdfmakeを利用してPDFファイルを作成しておりました。

しかし、

独自フォントの作成し、利用する時にWebpack利用時にハマりどころがある
独自フォントはbase64エンコードされたttfが利用できるが日本語フォントの場合に巨大になり、メモリを大量に消費する

と言う点がネックになり、途中で後で紹介するpdf-libというものに切り替えています。

Web上には様々な例があるため、トライアンドエラーを繰り返しながらなんとかなるとは思いますが、Webpackやtypescriptを使った最新のフロントエンドではハマりどころが多く、その手の記事が無かったりするので注意が必要です。また、日本語フォントを利用する際は一度gitのrepositoryをクローンしてからフォント作成スクリプトを使ってビルドする必要があります。

ポイント	評価
Nodeとブラウザーで動く	△(Webpackなどを利用している場合はハマる)
型はあるか	○(DefinitelyTyped)
日本語フォントは使えるのか	△(自前でビルドが必要)
使いやすさ	○(宣言的でpdfmakeのレイアウトエンジンが利用可能)

jsPDF

公式サイト:https://github.com/MrRio/jsPDF

jsPDFは上記のPDFKitとは別に独自にPDF作成ができるライブラリです。この記事で紹介するライブラリの中で一番スター数が多く、比較的安定してメンテナンスされています。

node,ブラウザーで利用できるUMDモジュールも提供されています。(nodeで保存する場合はカレントディレクトリに保存されるので使い勝手悪いかもです)

命令的な操作ができるAPIが提供されており、複雑な帳票をプログラムする場合は難易度が高い印象です。

また、日本語を扱う場合は日本語のフォントを読み込ませる必要がありますが、ここにハマりどころがあるようです。
詳細は下記の記事にまとまっています

上記を参考にしていただければわかりますが、日本語フォントを扱うための方法はありますが、一手間必要になります。(ttfファイルの変換が必要)

できることは多いのですが、上記で説明したように操作が命令的でなため、使いこなすには一定のインプットが必要になります。(幸いにもリッチなドキュメントがあります https://rawgit.com/MrRio/jsPDF/master/docs/index.html)
また、英語の記事も多く人気なのは間違いないと思います。

ドキュメントを参考にして自分の用途に合った操作ができる場合はおすすめできます。(ドキュメントみた感じだとAcroFormとかできちゃいます。ヤバイな)

ポイント	評価
Nodeとブラウザーで動く	○(参考)
型はあるか	○
日本語フォントは使えるのか	○(ttfファイルの変換が必要)
使いやすさ	△プログラムの手続きが複雑

pdf-lib

公式サイト:https://pdf-lib.js.org/

pdf-libはPDFKitを参考にTypescriptで実装されたPDFの作成、編集ライブラリです。他のライブラリに比べて後発でリリースされたライブラリですが、非常によくできており、もちろんnode,ブラウザで動作します。また、PDFの結合、分割や埋め込みをサポートし、他のライブラリにない機能を持っていますが、ライブラリとしてシンプルで強力です。

他のライブラリと比較して大きく違う点がフォントファイルを埋め込む際にUint8Array,ArrayBufferが使用できるので、nodeの場合はfsで、ブラウザの場合はxhrを使ってフォントファイルを読み込むことができます。日本語の馬鹿でかいbase64のファイルを読み込む必要がなくなり、パフォーマンス的にも優れています。

もちろん、Webpackなどで利用でき、ドキュメントも充実しています。本サービスのlabelmake.jpも当初はpdfmakeを利用していましたが、途中からパフォーマンスの観点でPDF作成処理をpdf-libに行わせるよう変更しました。

欠点としては提供されているAPIが命令的なため複雑な帳票の場合、プログラムが複雑になってしまうという点と考えています。またレイアウトについてはpdf-libは責務を持たず、ユーザーに計算させるという方針ですので、中央揃えや右揃えなどのレイアウトはできません。あと地味ですが、位置情報の単位がptなので、位置を指定する時に若干面倒です。

個人的には後に紹介するlabelmakeを除くライブラリに比べて一番扱いやすく、パフォーマンスの観点でも優秀だと考えています。

まだ日本語での記事数はpdfmake,jsPDFと比べると少ないのですが、帳票が比較的シンプルでモダンな環境での開発の場合は参考にしてみてください。おすすめです。

ポイント	評価
Nodeとブラウザーで動く	○
型はあるか	○
日本語フォントは使えるのか	○
使いやすさ	△プログラムの手続きが複雑+レイアウトの計算は自分で行う必要がある

labelmake

公式サイト:https://labelmake.jp/javascript-pdf-generator-library

labelmakeはpdf-libのラッパーとして筆者が開発しました。特徴としてはpdf-libを使っている人はレイアウトは自分で計算する必要がありましたが、位置情報の単位をmmにし、alignment,line-heightなどのレイアウトの計算を行い、宣言的にデータでPDFを作成できるようにAPIをデザインしました。また既存のPDFをベースとして読み込んでそこに入力項目を足すことができます。

コードの例はこちらからご覧になれます。
スキーマがあるので、テンプレート的に帳票生成などに利用ができます。

帳票のデザインデータをJSONで管理できる点も複数のテンプレートを利用する際には読み込みがシンプルになり利用しやすいです。

pdf-libのメリットのフォントのデータでUint8Array,ArrayBufferが使用できる点や、PDFファイルの埋め込みができる点を利用して効率的に複雑な帳票が作成できるようにしています。

また、こちらのTemplate Design & Code Generatorを使い、帳票のデザインと、実行可能コードの生成を行うことができます。

ポジショントークにならないようにしたいと思いますが、既存のPDFファイルに対して入力項目を設定する形で帳票が作成でき、実際に本サービスでは現時点で様々なテンプレートをつかってPDFを作成しています。

デメリットとしてはまだ利用者も少なく、有名なライブラリではありません。
日本語フォントで利用していますが、他にも自分のサービスだけでは見つけられなかったバグがあるかもしれません。

そして、自由に0から帳票すると言うよりは既存のPDFをもとに入力項目を設置するという使い方がハマります。(俗に言うバリアブル印刷というやつです)
他のJavascriptのPDF作成ライブラリと比較しても、用途が合っている場合は、我ながらよくできていると思っていますので、ぜひスターやシェアをしていただけると嬉しいです笑

ポイント	評価
Nodeとブラウザーで動く	○
型はあるか	○
日本語フォントは使えるのか	○
使いやすさ	○

番外編

PDF.js

公式サイト:https://mozilla.github.io/pdf.js/

よく間違えられるのですが、非常に有名なライブラリなので紹介します。
PDF.jsはPDFのレンダリングライブラリで、PDFの作成ライブラリではありません。
PDFを表示するだけでなく、PDFのレンダリング結果をcanvasに転写し、PDFのレンダリング画像を取得することができます。

Webpack用のビルドもバンドルされており、最近のフロントエンドの環境でも利用可能です。

Puppeteer

公式サイト:https://github.com/puppeteer/puppeteer

GoogleのPuppeteerでもPDFファイルの作成が可能です。
テンプレートはhtmlとして管理する必要がありますが、Webの開発者なら装飾も行いやすいかと思います。

実装は下記の記事が参考になります。
- Generate a PDF from HTML with puppeteer

- Headless Chrome + puppeteerを使ったHTML→PDF変換サーバーを作る puppeteer編

バックエンドの実装が必要になるのと、PDF作成するまでにPuppeteerが起動するオーバーヘッドがありますが、それらが問題ない場合で、htmlでデザインしたいと言う場合には選択肢になるかもしれません。(可変のテーブルなどはデザインしやすいかと思います。)

まとめ

番外編を除く下記の5つのライブラリを紹介させていただきました。

PDFKit
pdfmake
jsPDF
pdf-lib
labelmake

参考になったでしょうか？
筆者はpdf-lib押しです。パフォーマンスも良く、レイアウトの計算が面倒ですがモダンなフロントエンド環境でも使いやすいです。

あとは、遊びでも構わないのでlabelmakeを触っていただけると嬉しいです！

Webページはこちらからご覧いただけます！

それでは！

hand-dotの投稿 - Crieit

JavascriptでPDFを作成するライブラリまとめと比較