pdf-best-practices

PDF ベストプラクティススキル

PDF ドキュメントとして完璧にレンダリングされる HTML を作成するための包括的なガイドラインです。

┌─────────────────────────────────────────────────────────────────────────────┐
│                         HTML to PDF Pipeline                                 │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│   ┌──────────┐    ┌──────────────┐    ┌─────────────┐    ┌──────────────┐  │
│   │  HTML    │───▶│  PDF Engine  │───▶│  Pagination │───▶│  Final PDF   │  │
│   │ Content  │    │  (Puppeteer) │    │  & Layout   │    │  Document    │  │
│   └──────────┘    └──────────────┘    └─────────────┘    └──────────────┘  │
│        │                                     │                              │
│        ▼                                     ▼                              │
│   ┌──────────┐                        ┌─────────────┐                       │
│   │  CSS     │                        │ Page Breaks │                       │
│   │  Styles  │                        │  & Margins  │                       │
│   └──────────┘                        └─────────────┘                       │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘

クイックリファレンス

やりたいこと	参照先
ドキュメント構造を正しく設定する	ドキュメントの設定
ページ区切りを制御する	ページ区切り
PDF 用に表を整形する	表
画像を適切に扱う	画像
コンテンツの密度を最適化する	コンテンツ密度
色と背景を設定する	色と背景
ヘッダー、フッター、ページ番号を追加する	ヘッダーとフッター
特定のドキュメントタイプを作成する	ドキュメントタイプ

まずはこちら

新しい PDF ドキュメントを作成する場合

1. HTML 構造については、ドキュメントの設定から始めてください
2. 不自然な分割を防ぐため、ページ区切りを確認してください
3. 余白の多いページを避けるため、コンテンツ密度を確認してください

データテーブルを扱う場合

1. 書式設定とヘッダーの繰り返しについては、表をお読みください
2. 行の分割を防ぐため、ページ区切りを適用してください

ドキュメントに画像がある場合

1. サイズと配置については、画像に従ってください
2. 画像とキャプションが離れないように、ページ区切りを使用してください

特定のドキュメントタイプを作成する場合

1. タイプ固有のガイドラインについては、ドキュメントタイプを確認してください
2. 利用可能なタイプ：請求書、レポート、証明書、手紙、表が多いドキュメント、画像が多いドキュメント

デフォルト設定

PDF を生成する際は、以下の推奨パラメーターを使用してください。

{
  "format": "A4",
  "margin": {
    "top": "40px",
    "right": "40px",
    "bottom": "40px",
    "left": "40px"
  },
  "printBackground": true
}

クイックチェックリスト

PDF を生成する前に、以下を確認してください。

• DOCTYPE、html、head、body を含む完全な HTML 構造になっている
• CSS に A4 サイズの @page ルールが含まれている
• body に -webkit-print-color-adjust: exact が設定されている
• すべての画像に明示的な幅と高さが指定されている
• 表が thead/tbody 構造を使用している
• 論理的なコンテンツブロックに page-break-inside: avoid が設定されている
• 見出しに page-break-after: avoid が設定されている
• 過剰な余白や余白の多いページがない
• フォントサイズが 9pt 以上である
• 色に十分なコントラストがある
• pdfParams に format、margins、printBackground: true が含まれている