HTML → PDF変換とは？
HTMLマークアップをダウンロード可能なPDFに変換します。CSSスタイル・画像・表・カスタムページサイズに対応。請求書やレポートの作成、フォーマット済みWebコンテンツのオフライン保存に便利です。
用紙はA4、A3、レター、リーガルから選択でき、向きは縦横を切り替え、余白は0〜20mmで調整できます。必要ならパスワードでファイルを保護したり、フッターにページ番号を入れたりもできます。インラインCSS、Base64画像、テーブルもそのまま出力に反映されます。変換にはhtml2pdf.js(html2canvas経由)を使うため、Webフォントや高度なCSS効果を含むページはプレビューと出力がわずかにずれることがあります。
使い方
- ステップ1 — エディタにHTMLコンテンツを貼り付けるか入力します。ライブプレビューでPDFの仕上がりを正確に確認できます。
- ステップ2 — ページ設定を行います。用紙サイズ（A4・A3・レター・リーガル）、向き（縦/横）、余白を選択します。必要に応じてパスワードを設定したり、ページ番号を付けたりできます。
- ステップ3 — 「PDFを生成」をクリックしてドキュメントを作成し、デバイスに直接ダウンロードします。
使用するタイミング
- HTMLの請求書や領収書テンプレートをPDF化して取引先にメール送信する場面。
- グラフや表を含むレポートを、後で配布できるよう携帯性のあるPDFとして保存する場面。
- ワークショップや授業に向け、ウェブの記事を印刷可能な配布資料に整える場面。
結果
あるフリーランサーが会社ロゴ・明細表・合計金額を含む請求書のHTMLを貼り付け、A4縦向きで余白20mmに設定してPDFをダウンロード。クライアントへのメール添付に使いました。
よくある質問
- PDFがライブプレビューと違って見えるのはなぜ?
- PDFはhtml2canvasを通して一度画像化されたあとPDFに包まれます。Webフォントの読み込みが終わっていない、position: fixed要素やCSSフィルタが絡む、こうした場面ではプレビューと結果が少し異なることがあります。
- 別ドメインにある画像を入れられますか?
- 対象ホストが許可するCORSヘッダを返している場合に限ります。返していないと、html2canvasがピクセルを読めず、PDF上で空白になります。回避策は、画像をダウンロードしてBase64で埋め込む、または同一オリジンから配信することです。
- 改ページはどう制御しますか?
- 改ページを開始したい要素にpage-break-before: always(またはpage-break-after)を指定します。テーブル行が途中で切れないようにするにはpage-break-inside: avoidを行に付ければOKです。
- PDFの本文は選択できますか?
- 基本的にはコピー不可です。canvasで一旦ラスタライズするため文字はビットマップに変わります。テキスト選択用に透明テキスト層を重ねる手法もありますが、本ツールはラスタライズ済みPDFを書き出します。読むには十分ですが、選択は難しいことが多いです。
- 貼り付けるHTMLにサイズ制限はありますか?
- 実運用では数百KB相当のマークアップ、ページ数で10〜15ページくらいが目安です。それ以上になるとメモリ不足に陥りやすく、DOM全体を1枚の大きなcanvasに描画してから分割する処理が破綻します。