5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScriptでPDF生成5パターン

Last updated at Posted at 2023-07-04

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生成パターンについてのみ取り上げています。参考になれば幸いです。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?