HTMLをPDFに変換する方法
HTMLからPDFへの変換ガイドと印刷CSSビルダー
HTMLをPDFに変換する方法：印刷用CSS、window.print() | We.Inc
HTMLをきれいなPDFにする方法：印刷ダイアログから保存する、@pageとbreak-insideで印刷用CSSを書く、window.print()を呼ぶ、サーバーでレンダリングする。印刷CSSビルダー付きです。
WebページをPDFにする一番早い方法は、ブラウザー自体の印刷ダイアログです。ダイアログを開き、保存先にPDFを選んで保存します。PDFの見た目を調整するには、@media printと、用紙サイズや余白を決める@pageを使った印刷用CSSを追加します。PDFを自動で作成するなら、PuppeteerやPlaywrightなどのヘッドレスブラウザーでページをレンダリングします。
HTMLからPDFを作る方法
- 印刷ダイアログからPDFとして保存
- デスクトップのあらゆるブラウザー
- できる
- ページを1回だけ保存したいとき
- window.print()ボタン
- 訪問者のブラウザー
- できる
- 請求書、領収書、チケット
- Puppeteer page.pdf()
- ChromeをNode.jsで操作
- できる
- サーバーでの自動レポート
- Playwright page.pdf()
- Playwrightスクリプトでブラウザーを操作
- できる
- 既存のテスト環境内での自動PDF作成
- 訪問者のブラウザー
- できない、ページが画像になる
- クライアント側での手軽なダウンロード
- jsPDF
- 訪問者のブラウザー
- 描画したテキストはできる
- コードでデータからPDFを組み立てる
このページで紹介する方法はどれも、最終的にはブラウザーのエンジンにページを紙の上へレイアウトさせるものなので、良い印刷用CSSはすべての方法に効きます。下で印刷用スタイルシートのたたき台を作り、ボタンを押すのが誰か（人、あなたのページ、サーバー）に合わせて変換方法を選びましょう。
- @pageルールの用紙サイズ、向き、余白を選びます。
- 必要なオプションにチェックを入れます：ナビゲーションを隠す、ブロックを分割しない、リンク先のアドレスを印刷する、背景色を残す。
- CSSをスタイルシートにコピーします。印刷時にだけ適用されます。
- ブラウザーで印刷プレビューを開き、保存先にPDFを選んで結果を確認します。
- 印刷プレビューを試験台として使いましょう。CSSを変更するたびに更新され、費用もかかりません。
- ナビゲーション、クッキーバナー、サイドバーは印刷時に隠しましょう。紙の上では誰もクリックできません。
- 表、図、コードブロックはbreak-inside: avoidで分割されないようにしましょう。
- ブラウザーはデフォルトで印刷時に背景色を省きます。print-color-adjust: exactで残すよう指示できますが、最終的には訪問者の印刷設定が優先されます。
- 物理的に正確な寸法が必要な場合は、印刷サイズにpt、mm、inを使いましょう。
よくある質問
ツールを使わずにWebページをPDFとして保存するには？
ブラウザーのメニューかキーボードショートカットで印刷ダイアログを開き、保存先またはプリンターの一覧からPDFの項目を選びます。正確な名前はブラウザーとOSによって異なります。
ページに「PDFをダウンロード」ボタンを付けるには？
最もシンプルで誠実な方法は、window.print()を呼ぶボタンです。同じ印刷ダイアログが開き、訪問者はそこでPDFとして保存できます。ライブラリは不要で、テキストも選択でき、あなたの印刷用CSSが使われます。
表が2ページに分かれないようにするには？
表にbreak-inside: avoidを追加します。長い表なら行に追加します。古いpage-break-inside: avoidは別名として扱われるので、古いスタイルシートでも引き続き動作します。
CSSで用紙サイズを指定できますか？
できます。@page { size: A4 portrait; margin: 15mm; }でページボックスのサイズと余白を指定します。PuppeteerはpreferCSSPageSizeがtrueのときだけこれを使い、それ以外では独自のformatオプション（デフォルトはLetter）で決まります。
html2pdf.jsのPDFがぼやけたり巨大になったりするのはなぜですか？
READMEにある通り、内容を画像にレンダリングしてその画像をPDFに配置するため、テキストは選択も検索もできず、ファイルも大きくなります。テキストが重要なら、印刷かヘッドレスブラウザーを使いましょう。
印刷用CSSが土台になる
- @media printブロックを使えば、画面のデザインに手を加えずに紙用のスタイルを付け直せます。紙の上で意味のないものを隠し、本文の列を広げ、読みやすい文字サイズを設定しましょう。
- @pageルールはページボックスそのもの、つまりサイズ、余白、向きを制御し、:first、:left、:rightで特定のページを別扱いにできます。MDNでは@pageは2024年12月からBaselineの新たに利用可能な機能とされていますが、一部はまだブラウザーによって異なります。
サーバーでレンダリングすべきとき
- 毎晩のレポートやメールで送る請求書のように、人の手を介さずにPDFを作る必要があるなら、ヘッドレスブラウザーを動かします。Puppeteerのpage.pdf()は印刷用メディアタイプで出力し、format、margin、printBackgroundなどのオプションを受け取り、ファイルパスに直接保存できます。
- ブラウザーのバージョンとフォントを自分で管理できるので、サーバーでのレンダリングは毎回同じ結果になります。その代わり、そのブラウザーを運用して安全に保つ必要があるので、印刷ボタンでは足りないときだけ採用しましょう。
印刷用CSSリファレンス
印刷ページを形作るルールとプロパティ
- @media print { }
- 任意のルール
- 印刷時やPDF保存時にだけ適用されるスタイル
- @page { size }
- A5、A4、A3、B5、B4、letter、legal、ledger、または長さ、portraitまたはlandscape
- 用紙サイズと向き
- @page { margin }
- 長さ
- 全ページの余白
- @page :first
- 疑似クラス
- 最初のページだけ余白を変える
- auto, avoid, avoid-page, avoid-column
- ブロックを1ページに収める
- break-before / break-after
- auto, avoid, page, left, right
- ブロックの位置で改ページを強制または防止する
- economy, exact
- ブラウザーが色や背景を省いてよいかどうか
コピーして使える印刷の例
印刷またはPDF保存のボタン
window.print()は印刷ダイアログを開き、閉じるまでページをブロックします。クラスによってボタン自体は紙に印刷されません。
請求書ごとに新しいページから始めるレイアウト
各請求書の後にbreak-after: pageを付けると、まとめて印刷したときに1枚に1通の請求書になります。
印刷の直前にページを準備する
beforeprintとafterprintはダイアログの前後で発生するので、折りたたまれたセクションを展開するのに便利です。
Puppeteerによるサーバー側のPDF作成
preferCSSPageSizeを指定すると@pageのサイズがformatオプションより優先され、printBackgroundで背景が残ります。
印刷CSSビルダー
用紙サイズ
向き
縦
横
余白：{n} mm
ナビゲーション、フッター、サイドバーを隠す
表、図、コードを1ページに収める
リンクの後にリンク先のアドレスを印刷する
背景色を残す
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る