HTMLをPDFに変換する方法

HTMLからPDFを作成することは、請求書、レポート、レター、証明書を生成するのに役立ちます — レイアウトをCSSで制御したいが、PDFとして配布する必要があるドキュメントすべて。

HTMLをPDFに変換する方法

1. HTMLを貼り付け — インラインCSSまたは<style>タグを含むHTMLコードをエディターに入力します。コードには、ヘッダー、テーブル、画像、スタイルを持つ完全なページ構造を含めることができます。
2. レンダリングをプレビュー — ライブプレビューは、入力するにつれてPDFがどのようにレンダリングされるかを正確に表示します。レンダリングが期待に合うまでHTMLとCSSを調整します。
3. 生成してダウンロード — 生成ボタンをクリックしてブラウザでPDFを作成し、瞬時にダウンロードします。

作成できるもの

• 請求書と領収書 — 会社のアイデンティティ、項目別の行、合計を持つ構造化されたテーブル
• レポート — 見出し、段落、グラフ、データテーブルを持つフォーマットされたドキュメント
• 証明書 — カスタムフォント、ボーダー、中央揃えのテキストを持つスタイル付きレイアウト
• レター — レターヘッド、本文、署名エリアを持つビジネス通信
• 履歴書 — 申請用にクリーンなPDFとしてエクスポートされる洗練されたレイアウト

PDF出力のスタイルのヒント

インラインスタイルまたは<style>タグを使用 — 外部スタイルシートは読み込まれません。すべてのCSSを要素にインラインで配置するか、HTMLの<style>ブロックに配置します。

ページ余白を定義 — CSSで@page { margin: 20mm; }を使用して、PDFのコンテンツの周りのスペースを制御します。

印刷に適した単位を使用 — mm、cm、ptは、pxまたはremよりもPDFで予測可能です。物理的な寸法と一致する必要がある余白とスペーシングにはmmを使用します。

ウィンドウ依存のレイアウトを避ける — パーセンテージ幅と固定ピクセル幅が最も上手く機能します。ウィンドウ関連の単位(vw、vh)はPDFで期待どおりに動作しない可能性があります。

ヒント

• 最初にプレビュー — 生成する前に常にライブプレビューを確認します。毎回PDFを再生成するよりも、HTMLを反復する方がはるかに高速です。
• 画像にbase64を使用 — PDFに含めることを保証するために、画像をbase64データURIに変換します。外部URLはCORS制限により失敗する可能性があります。
• シンプルに保つ — 複雑なCSSレイアウト(ネストされたグリッド、重なり合う配置要素)は完全にレンダリングされない可能性があります。シンプルなレイアウトはより信頼性の高いPDFを与えます。
• ページブレークをテスト — 複数ページのドキュメントでは、page-break-before: alwaysを使用して新しいページが始まる場所を制御します。