ReactでのPDFダウンロード機能の実装と技術選定時の判断ポイント - TalentX Tech Blog

こんにちは、TalentXでフロントエンドを担当している大村です。 今回は、ReactアプリケーションでPDFダウンロード機能を実装した際の技術選定の経緯と、最終的な実装内容についてまとめます。 同じようにReactでPDFダウンロード機能を検討しているフロントエンドエンジニアの方の参考になれば幸いです。 背景 なぜフロントエンドでPDF生成するのか PDF生成の実装方法として、大きくバックエンドで生成する方法とフロントエンドで生成する方法があります。 それぞれの一般的なメリット・デメリットは以下のとおりです。 バックエンドで生成する場合 サーバー側のリソースを使うため、クライアントの端末スペックに依存しない Puppeteer や wkhtmltopdf など成熟したツールが豊富で、HTML/CSSをそのままPDF化しやすい フォントや外部リソースの管理をサーバー側で一元化できる 一方で