【ITニュース解説】How to generate PDF that supports modern CSS such as Tailwind
2025年09月07日に「Dev.to」が公開したITニュース「How to generate PDF that supports modern CSS such as Tailwind」について初心者にもわかりやすいように丁寧に解説しています。
ITニュース概要
LaravelでTailwindなどモダンCSSを使ったPDF生成は、Spatie Browsershotで簡単に。ヘッドレスChromeがHTMLをレンダリングするため、FlexboxやGrid、JavaScriptも完全対応。請求書やレポートなど、複雑なデザインのPDFも手軽に作れる。
ITニュース解説
Webアプリケーションを開発していると、画面に表示されている内容をPDFファイルとして出力したい場面がよくある。例えば、オンラインショップの購入履歴を請求書としてPDF化したり、Webサイトで作成したレポートをダウンロードできるようにしたりといったケースだ。しかし、これまでのPDF生成ツールには、モダンなWebデザインをそのままPDFに変換する上で、いくつかの課題があった。
特に、「Tailwind CSS」のように、現代のWeb開発で広く使われているCSSフレームワークや、「Flexbox」「CSS Grid」といった高度なレイアウト技術を使ったデザインを、従来のPDF生成ツールで正確に表現することは難しかった。これらのツールは、複雑なCSSやJavaScriptの実行環境を持たないことが多く、結果として、Webサイトでは美しく表示されていたデザインが、PDFでは崩れてしまったり、意図しない表示になったりすることが頻繁に発生していた。これにより、開発者はPDFのために別途シンプルなスタイルを適用したり、PDFの生成方法自体を工夫したりする必要があり、開発の手間が増えていたのだ。
こうした課題を解決するために登場したのが、「Spatie Browsershot」というツールである。このBrowsershotは、Google Chromeの特別なバージョンである「Headless Chrome」を利用してPDFを生成するという画期的なアプローチを採用している。Headless Chromeとは、私たちが普段使っているようなGUI（グラフィカルユーザーインターフェース）を持たない、つまり画面表示を行わないChromeブラウザのことだ。これを使うことで、実際のWebブラウザがHTML、CSS、JavaScriptを解釈し、レンダリングする（画面に表示する）のと同じ方法で、内容をPDFとして出力できるようになった。このため、Tailwind CSSはもちろん、FlexboxやCSS GridといったモダンなCSS技術、さらにはJavaScriptによって動的に変化する内容まで、Webブラウザで見たままの高品質なPDFを生成することが可能になる。
Browsershotを利用するための準備としては、いくつかのツールが必要になる。まず、Browsershot自体はPHPのライブラリなので、「Composer」というPHPのパッケージ管理ツールを使ってインストールする。具体的には、「composer require spatie/browsershot」というコマンドを実行するだけで導入できる。次に、Browsershotが内部でHeadless Chromeを操作するために、「Node.js」と「npm」というツールが必要だ。Node.jsはJavaScriptをWebブラウザの外で実行するための環境であり、npmはNode.jsのパッケージ管理ツールである。これらは「nvm」というツールを使ってインストールするのが一般的だ。nvmを使うと、複数のNode.jsバージョンを簡単に切り替えることができるため、開発環境をきれいに保てる。Node.jsとnpmがインストールできたら、最後に「Puppeteer」というライブラリをインストールする。Puppeteerは、Googleが開発したNode.jsライブラリで、Headless Chromeをプログラムから操作するためのAPIを提供している。このPuppeteerをインストールすると、Browsershotが利用するChromium（Chromeのオープンソース版）も自動的にダウンロードされるため、別途Chromeをインストールする手間はかからない。
これらの準備が整ったら、いよいよPDFの元となるHTMLコンテンツを作成する。LaravelのようなPHPフレームワークを使っている場合、「Bladeテンプレート」と呼ばれる仕組みでHTMLを作成するのが一般的だ。このBladeテンプレートの中に、Tailwind CSSを使ったHTMLを記述する。例えば、HTMLファイルの<head>セクションに、Tailwind CSSのCDN（Content Delivery Network）リンクを追加することで、インターネット経由でTailwind CSSを読み込み、すぐにそのスタイルを利用できる。記事の例では、簡単なタイトルと文章をTailwind CSSのクラスを使って装飾している。これにより、背景色や文字の色、フォントサイズ、配置などをTailwind CSSのユーティリティクラスで直感的に指定できる。
HTMLテンプレートが完成したら、いよいよBrowsershotを使ってPDFを生成する。これは、Laravelのルートファイルやコントローラーの中でPHPコードとして記述する。まず、use Spatie\Browsershot\Browsershot;という行でBrowsershotクラスを読み込む。次に、Browsershot::html(view('pdf.template')->render())という記述で、先ほど作成したBladeテンプレートをHTMLとしてレンダリングし、その内容をBrowsershotに渡す。その後、-format('A4')で用紙サイズをA4に指定したり、-landscape()で横向きにしたり、-showBackground()で背景色や背景画像をPDFに含めるように設定したりと、さまざまなオプションを指定できる。最後に、-save($pdfPath)というメソッドで、生成されたPDFを指定したパスに保存する。この例では、storage/app/public/example.pdfというパスに保存し、そのファイルをダウンロードさせる処理が示されている。
Tailwind CSSをBrowsershotと一緒に使う際のヒントとして、いくつかの点が挙げられる。一つは、先述の通り、開発段階ではTailwind CSSのCDNバージョンを使うと手軽に始められるということだ。本番環境でパフォーマンスを重視する場合は、Tailwind CSSをコンパイルして、不要なCSSを削除する「Purge CSS」を適用するのが一般的だが、開発初期や小規模な用途ではCDNで十分である。また、カスタムフォントを使いたい場合は、Webフォント（Google Fontsなど）を利用するか、@font-faceルールを使ってフォントファイルを直接埋め込む方法がある。画像を使う場合は、Browsershotが画像を正しく読み込めるように、絶対URL（https://example.com/images/logo.pngのようなフルパス）で指定することが推奨される。
さらに、より高度な利用方法として、Laravel MixやViteのようなビルドツールを使ってTailwind CSSをコンパイルしている場合でも、Browsershotは対応できる。この場合、BrowsershotにNode.jsとnpmの実行ファイルのパスを明示的に指定することで、コンパイル済みのCSSやJavaScriptを正しく処理してPDFを生成できる。これは、システムに複数のNode.jsバージョンがインストールされている場合や、特定の環境設定が必要な場合に役立つ設定だ。
このように、Spatie Browsershotを導入することで、Laravelアプリケーションにおいて、Tailwind CSS、Flexbox、CSS Grid、JavaScriptといった最新のWeb技術をフル活用したPDFを簡単に生成できるようになる。これにより、デザイン性の高い請求書、見栄えの良いレポート、公式な証明書など、あらゆる種類のスタイリングされたPDFコンテンツを、Webブラウザで表示されるのと同じ品質で作成することが可能になる。これは、Webアプリケーション開発におけるPDF生成の可能性を大きく広げるものであり、開発者の負担を軽減しつつ、より高品質なドキュメントを提供できるようになる素晴らしい解決策である。