なぜHTML to PDFが必要なのか
ウェブページの内容を印刷、アーカイブ、オフライン共有したい場合、PDFに変換するのが最も便利です。HTML to PDFは動的なウェブページを固定ドキュメントに変換します。
よくあるケース：
- ウェブ記事の保存
- オンライン請求書/レシートの生成
- レポートのエクスポート
- 電子書籍の作成
HTML to PDFの変換方法
ブラウザの印刷
最もシンプルな方法：ブラウザでCtrl+Pを押し、出力先で「PDFとして保存」を選択。ブラウザのレンダリングエンジンが直接ウェブページをPDFに変換します。
メリット：無料、CSS対応が良い。 デメリット：手動操作、一括処理に不適切；ウェブページのインタラクティブ要素が干渉する可能性。
オンラインツール
HTML to PDFツールを使用：
- ウェブページのURLを入力またはHTMLをペースト
- ツールがレンダリングして変換
- PDFをダウンロード
ブラウザ上で処理され、内容はアップロードされません。
プログラミングライブラリ
開発シナリオではプログラミングライブラリを使用：
- JavaScript：Puppeteer（ヘッドレスChrome）、jsPDF
- Python：pdfkit、WeasyPrint
- サーバーサイド：wkhtmltopdf
CSSスタイル処理
CSSの対応度
変換エンジンによってCSSの対応度が異なります：
- ブラウザエンジン（Chrome）：最も包括的、flex、gridも対応
- wkhtmltopdf：旧WebKitベース、新しいCSSは非対応
- WeasyPrint：CSS 2.1の大部分、CSS 3の一部に対応
PDF変換前にエンジンが対応するCSS機能を確認してください。
印刷専用CSS
@media printで印刷専用スタイルを記述：
@media print {
.no-print { display: none; } /* 印刷しない要素を非表示 */
body { font-size: 12pt; } /* 印刷にはpxではなくptを使用 */
a { text-decoration: none; } /* リンクの下線を削除 */
}
インタラクティブ要素の非表示
ウェブページのナビゲーション、ボタン、広告はPDFでは無意味です。@media printで非表示に：
@media print {
nav, footer, .ad, .sidebar { display: none; }
}
色の処理
- 画面はRGB、PDF印刷はCMYK
- 背景色はデフォルトで印刷されない、強制印刷するには
-webkit-print-color-adjust: exactを設定 - 暗い背景はPDFでインク消費が多い、明るい色に変更を検討
ページ分割制御
改ページ
CSSで改ページを制御：
h1 { page-break-before: always; } /* 見出し前に改ページ */
table { page-break-inside: avoid; } /* 表が切断されるのを防ぐ */
img { page-break-inside: avoid; } /* 画像が切断されるのを防ぐ */
改ページプロパティ
page-break-before：要素の前に改ページpage-break-after：要素の後に改ページpage-break-inside：要素内で改ページしない
孤立行の防止
p { orphans: 3; widows: 3; } /* 段落の末尾/先頭に最低3行 */
ヘッダー・フッター
ブラウザの印刷
ブラウザの印刷ダイアログでヘッダー・フッター（ページ番号、タイトル、URL）を設定できます。ただしスタイルは限定的です。
ライブラリによる生成
Puppeteerなどのライブラリでカスタムヘッダー・フッターを設定：
const pdf = await page.pdf({
displayHeaderFooter: true,
headerTemplate: '<div style="font-size:9pt;">レポートタイトル</div>',
footerTemplate: '<div><span class="pageNumber"></span> ページ</div>',
margin: { top: '60px', bottom: '60px' }
});
画像の処理
画像のパス
HTML内の画像には絶対パスまたはbase64を使用：
- 絶対パス：
<img src="https://example.com/img.png"> - base64：
<img src="data:image/png;base64,..."> - 相対パス：PDF変換時に見つからない可能性、絶対パスまたはbase64を使用
base64埋め込み
小さい画像はbase64で埋め込み、パスの問題を回避：
<img src="data:image/png;base64,iVBORw0KGgo...">
大きい画像をbase64にするとHTMLが大きくなるため、バランスを考慮してください。
画像の鮮明度
- 高解像度の画像を使用
- 元のサイズ以上に拡大しない
- ベクター画像（SVG）はPDF変換で最も鮮明
フォントの処理
フォントの読み込み
ウェブページでWeb Font（Google Fontsなど）を使用する場合、PDF変換時にフォントの読み込みが完了している必要があります。プログラミングライブラリで変換する際は、フォントの読み込み完了後に変換してください。
フォントの埋め込み
PDFにはフォントを埋め込むことで、どのデバイスでも同じように表示できます。変換ツールは通常自動的に埋め込みます。
汎用フォント
汎用フォント（Arial、Times New Roman、宋体）を使用してフォントの問題を回避します。
DocsAllで変換
- ウェブページのURLを入力またはHTMLコードをペースト
- ツールがウェブページをレンダリング
- PDFに変換
- ダウンロード
ブラウザ上で処理され、内容はサーバーにアップロードされません。
よくある質問
スタイルが失われる
- CSSが読み込まれていない（外部CSSのパスが間違っている）
- エンジンが対応していないCSS機能を使用
- 解決：インラインCSSを使用、対応しているCSS機能を使用
改ページで内容が切断される
- 改ページ制御が設定されていない
- 解決：page-break-inside: avoidを追加
画像が表示されない
- パスが間違っている
- クロスオリジン制限
- 解決：絶対パスまたはbase64を使用
中国語の文字化け
- フォントが中国語に対応していない
- エンコーディングがUTF-8ではない
- 解決：中国語対応フォントを使用、HTMLでUTF-8エンコーディングを宣言
背景色が印刷されない
- ブラウザはデフォルトで背景を印刷しない
- 解決：CSSで
-webkit-print-color-adjust: exactを設定、または印刷ダイアログで「背景グラフィック」にチェック
ページが広すぎる
- ウェブページの幅がPDFページを超えている
- 解決：CSSの幅を調整、または横向きの用紙に変更
まとめ
HTML to PDFのポイントはCSSスタイル処理とページ分割制御です。@media printで印刷スタイルを記述し、インタラクティブ要素を非表示にします。改ページはpage-breakプロパティで制御します。画像には絶対パスまたはbase64を使用してください。DocsAll HTML to PDFツールはブラウザ上で動作し、内容が外部に漏れません。