PDFの生成は様々なシチュエーションで必要とされる機能です。JavaScriptではいくつかの方法があります。
以下5パターンについて一通り実装した経験からメリット・デメリットを簡単に書きます。
バックエンドでの生成
1. HTML + Puppeteer
PuppeteerはGoogle ChromeまたはChromiumをヘッドレス(UIなし)で操作するためのNode.jsのライブラリです。Puppeteerを使えばHTMLをレンダリングしてPDFとして保存することが可能です。
メリット:
- HTMLとCSSを用いたレイアウトなので、デザインの自由度が非常に高いです。
デメリット:
- レンダリングのためにはブラウザのエンジンが必要なので、サーバー側のリソース消費が大きいです。
- ブラウザのセキュリティ制限により、一部の機能が利用できない場合があります。
2. PDFKit
PDFKitは、PDFをプログラムで生成するためのNode.jsのライブラリです。
メリット:
- PDFストリームを直接生成するため、パフォーマンスが良いです。
- フォント、色、グラフィックスなど、PDFの全ての要素を自由に制御できます。
デメリット:
- HTMLやCSSの知識が直接活用できないため、レイアウトの制作には時間がかかります。
3. Konva + PDFKit
Konvaは2D描画を行うためのライブラリで、これをPDFKitと組み合わせることで、2Dグラフィックスを含んだPDFを生成することが可能です。
メリット:
- 2Dのグラフィックス表現が可能で、図やイラストを含むPDFが作成できます。
- Konvaは直感的なAPIを持つため、開発が容易です。
デメリット:
- HTMLやCSSの知識が直接活用できないため、レイアウトの制作には時間がかかります。
- KonvaとPDFKitの両方を理解する必要があります。
- Konvaで生成した画像をPDFに埋め込む部分はラスター形式になるため、ベクター形式と比べ粗く表示されます
- ラスター形式のためベクター形式と比べ同じレイアウトデザインでもサイズが大きくなります。
フロントエンドでの生成
4. Konva + jsPDF
この方法はKonvaを使用して2Dグラフィックスを作成し、jsPDFを使用してフロントエンドでPDFを生成するものです。
メリット:
- バックエンドに負荷をかけずにクライアントサイドでPDF生成が可能です。
- 2Dのグラフィックス表現が可能で、図やイラストを含むPDFが生成できます。
- Canvaのようなユーザー側で自由度のあるPDFを生成できます。
デメリット:
- クライアントのリソースに依存しますので、大規模なPDFの生成には向かないかもしれません。
その他
5. SpreadSheet + GAS
Google Apps Script(GAS)を用いて、SpreadSheetからPDFを生成する方法です。
メリット:
- 上の4つ方法より最速である程度の見た目のデザインをもったPDFが生成可能です。
- エンジニア以外もデザインのカスタマイズが可能です。
- スプレッドシートを更新するだけですぐに修正が可能です。
- Google Driveのセキュリティと統合性を享受できます。
デメリット:
- レイアウトやデザインの自由度が低いです。
- GASの実行には制限(クォータ)がありますので、大量のPDFを短時間に生成することは難しいかもしれません。
- GASに関するエラー調査がしずらいため、中長期の運用には向いていません。
この記事はChatGPTにベースを作成してもらい、私が追記しました。これまで実際に実装してきたPDF生成パターンについてのみ取り上げています。参考になれば幸いです。