HTML to PDF：本来よりも難しい

素敵なWebページがあります。PDFが必要です。Control+P、PDFとして保存。完了？

時にはそうです。でも結果がレイアウト崩れ、画像欠落、変なページブレーク、文の途中で切れたヘッダーだったりします。

HTMLとPDFは根本的に異なります。うまく動かすには努力が必要です。

なぜ複雑なのか

HTMLは流動的。 コンテンツは利用可能なスペースを埋めるように流れます。レスポンシブ。柔軟。

PDFは固定。 特定のページ寸法。正確な配置。何も流れません。

変換とは、適応するように設計されたものを取り、固定ページに無理やり押し込むことを意味します。

ページブレークは敵

美しい段落が2ページに分割されてしまいます。テーブルヘッダーがページ3、データはページ4から始まります。

CSSには page-break-before、page-break-after、page-break-inside プロパティがあります。これらがコントロールするはずです。

h2 {
  page-break-after: avoid;
}

table {
  page-break-inside: avoid;
}

「はずです」というのは、ブラウザのサポートが異なるからです。徹底的にテストしましょう。

何がレンダリングされ、何がされないか

Webフォント： 時々動き、時々動きません。フォールバックではなく、実際のフォントでテストしましょう。

背景色： デフォルトで除外されることが多い（インクを節約）。「背景を印刷」設定を確認しましょう。

画像： 外部画像が読み込まれないかもしれません。変換時にCORS問題が現れます。

JavaScriptでレンダリングされたコンテンツ： コンテンツがJSで読み込まれる場合、PDFがページをキャプチャする時に存在しないかもしれません。

アニメーションとトランジション： 消えます。PDFは静的です。

印刷用スタイルシート

CSSには印刷用のメディアタイプがあります：

@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
  }

  a::after {
    content: " (" attr(href) ")";
  }
}

ナビゲーションを隠し、フォントを調整し、リンクのURLを表示。印刷出力専用に設計しましょう。

異なる変換方法

ブラウザのPDF印刷： 一回限りの変換に良い。ブラウザによって結果が異なります。

ヘッドレスブラウザ（Puppeteer、Playwright）： プログラマティックコントロール。一貫した結果。セットアップが必要。

PDFライブラリ（wkhtmltopdf、WeasyPrint）： 専用ツール。出力のより良いコントロール。

オンラインサービス： HTMLをアップロード、PDFを取得。時々使う分には便利。

それぞれ品質、速度、コントロールのトレードオフがあります。

より良い結果のためのコツ

固定幅を使う。 レスポンシブレイアウトは予測不可能な結果を生みます。PDF出力用に特定の幅を設定しましょう。

レイアウトをシンプルに。 複雑なCSS gridやflexboxは壊れることがあります。シンプルなレイアウトの方が確実に変換されます。

フォントを埋め込む。 システムフォントが利用可能だと期待しないでください。

早めにテスト。 ページ全体を作ってからPDF変換を試すのではなく。作りながらテストしましょう。

明示的なページサイズを設定。 PDFはページ単位で考えます。サイズを伝えましょう。

@page {
  size: A4;
  margin: 1cm;
}

ネイティブPDFを使うべき時

正確なコントロールが必要なら——契約書、請求書、正確なフォーマットが必要なレポート——HTMLを変換する代わりにPDFを直接生成することを検討しましょう。

PDFKit、ReportLab、iTextのようなライブラリは、HTML変換レイヤーなしでPDFを作成します。

より多くの作業、より多くのコントロール、より予測可能な結果。

---

HTMLからPDFへの変換は機能しますが、印刷スタイル、ページブレーク、WebとPrintメディアの違いに注意が必要です。徹底的にテストし、それに応じて期待値を設定しましょう。