HTML から PDF へのフォーマット問題を修正

HTMLは動的ですが、PDFは静的です。HTMLをPDFに変換する際の最も一般的なレイアウト、スタイリング、レンダリングの問題を解決する方法は次のとおりです。

3分で読了

1. 画像が欠落または壊れている

PDFが画像欠落でエクスポートされる場合、通常は画像が相対パスを使用しているためです(例: src="/images/logo.png")またはブラウザのセキュリティポリシーによってブロックされているためです。

修正: 絶対URLを使用するか(例: src="https://example.com/images/logo.png")、または画像を直接Base64データURIとして埋め込みます。

2. CSSスタイルが適用されない

HTMLプレビューは素晴らしく見えるのに、PDF出力はまったくスタイルのないテキストになることがあります。

修正: コンバーターが外部スタイルシートの読み込みに苦労している可能性があります。CSSをドキュメントの head 内のインライン <style> ブロックに移動するか、個々の要素にインライン style="..." 属性を使用してください。

3. 不適切な改ページ

デフォルトでは、HTMLコンバーターはページの高さに厳密に基づいてドキュメントをチョップし、テーブル、画像、または段落を2ページにわたって不格好に分割することがあります。

修正: CSSプリントプロパティを使用して改ページを明示的に制御します:

.no-break {
  page-break-inside: avoid;
}

.force-break-before {
  page-break-before: always;
}

適用: .no-break クラスをテーブルや画像コンテナに適用して、半分に切られないようにします。

4. レイアウトが広すぎる

Webページは横長の画面を埋めるように設計されていますが、標準PDF(A4やUS Letterなど)は縦長で狭くなっています。

修正: HTMLコンテナに最大幅が設定されていることを確認します。標準的な印刷ページ幅をシミュレートするために、約 680px の最大幅ラッパーを強制することをお勧めします。

まだ問題がありますか?

コードを当社の HTML to PDF converterに貼り付けてみてください。これらのエッジケースの多くを自動的に処理する高忠実度のレンダリングエンジンに依存しています。