HTMLをPDFに変換

HTMLコードを貼り付けるか、保存したWebページを画像やスタイルシートごと開くと、実際の用紙幅でプレビューできます。用紙サイズ、余白、ヘッダー、フッター、ページ番号を選んでPDFをダウンロード。ブラウザの印刷機能を使えば、文字を選択・検索できるPDFも作れます。ファイルはどこにもアップロードされません。

無料・登録不要

ページのプレビュー
ページ設定
向き

JavaScriptは初期設定で無効です。グラフを描画してから変換したいときなど、信頼できるコードのときだけ有効にしてください。

HTMLを貼り付けるかファイルを開いてください。入力するとプレビューが更新されます。

「PDFをダウンロード」はプレビューどおりに各ページを描画し、Webフォントや色もそのまま残します。「文字を選択できるPDFとして保存」は印刷ダイアログを開きます。プリンターで「PDFに保存」を選ぶと、検索できる文字とリンクが残ります。

使用ライブラリ: html2canvas (MIT), pdf-lib (MIT).

使い方

  1. HTMLを貼り付けるか、.htmlファイルを画像やCSSファイルといっしょに開きます。
  2. プレビューを確認し、用紙サイズ、向き、余白を選びます。
  3. 必要に応じてヘッダー、フッター、ページ番号を追加します。
  4. 「PDFをダウンロード」か、文字を残したい場合は「文字を選択できるPDFとして保存」をクリックします。

このツールの特長

コードでもファイルでも

.htmlファイルを画像・フォント・CSSといっしょに開けば、自動で関連付けます。

用紙幅でプレビュー

印刷範囲の幅でプレビューするので、改行位置を変換前に確認できます。

ページ設定

A4、B5(JIS)、A3、A5、レターなど。縦・横、余白も自由に設定できます。

きれいな改ページ

行と行の間で改ページし、break-before: page などのCSS指定にも従います。

ヘッダー・フッター・ページ番号

各ページの上下に文字を入れ、「2 / 5」のようなページ番号を付けられます。日本語もそのまま表示されます。

アップロードなし

変換はブラウザ内で完結。請求書や契約書などの機密文書も安心です。

HTMLをPDFにする2つの方法

「PDFをダウンロード」は、プレビューどおりに各ページを描画して高解像度の画像として保存します。どのPDFビューアーでも見た目が同じで、Webフォント、グラデーション、SVGのグラフもそのまま残ります。そのかわり、文字の選択や検索はできません。

「文字を選択できるPDFとして保存」は、指定した用紙サイズ・余白・ページ番号でブラウザの印刷機能にページを渡します。プリンターで「PDFに保存」または「Microsoft Print to PDF」を選んでください。文字とリンクが残り、ファイルサイズも小さくなるので、請求書や契約書に向いています。

PDFをダウンロードPDFとして保存(印刷)
文字の選択・検索できないできる
リンク使えない使える
プレビューとの一致完全に一致ほぼ一致
ファイルサイズ大きめ小さめ
スマートフォン使えるブラウザによる

日本語のHTMLをPDFにするときのポイント

PDFで日本語が文字化けしたり「□」になったりするのは、フォントが見つからないことが主な原因です。このツールは端末に入っている日本語フォント(游ゴシック、ヒラギノ、Noto Sans JPなど)で描画するため、そのままでも崩れにくくなっています。特定の書体を使いたい場合は、Webフォントをリンクするか、フォントファイルをHTMLといっしょに開いてください。

縦書きの文書は writing-mode: vertical-rl を指定すれば、「文字を選択できるPDFとして保存」で縦書きのまま出力できます。学校のプリントや書類にはB5(JIS)も選べます。

CSSで改ページを指定する

要素に break-before: page を指定すると、その要素から新しいページになります。別紙や章の区切りに便利です。表の行や図を途中で分けたくないときは break-inside: avoid を指定します。どちらの変換方法でも有効です。

印刷用のスタイルは @media print にまとめ、メニューやボタンは display: none で非表示に、文字サイズは pt で指定すると紙面での大きさが安定します。

Webページを丸ごとPDFにするには

ブラウザの仕組み上、ほかのサイトのURLを直接読み込むことはできません。ページを開いて Ctrl+S(Macは Cmd+S)で「ウェブページ、完全」として保存し、保存した.htmlファイルとフォルダ内のファイルをこのツールで開いてください。画像とCSSが自動で関連付けられます。

よくある質問

HTMLはサーバーにアップロードされますか?

いいえ。プレビュー、ページの描画、PDFの作成はすべてブラウザ内で行います。社外秘の文書にも使えます。

ダウンロードしたPDFの文字を選択できないのはなぜですか?

「PDFをダウンロード」は各ページを画像として保存するためです。文字を残したい場合は「文字を選択できるPDFとして保存」を使い、印刷ダイアログで「PDFに保存」を選んでください。

URLを入力してPDFにできますか?

ブラウザの制限で直接はできません。ページを Ctrl+S で「ウェブページ、完全」として保存し、そのファイルとフォルダの中身を開いてください。

日本語が文字化けしませんか?

端末の日本語フォントで描画するため、通常は文字化けしません。特殊なフォントを使う場合は、フォントファイルもいっしょに開いてください。

ページ番号を付けるには?

「ページ番号」にチェックを入れます。ダウンロードでは右下に、印刷での保存では対応ブラウザ(最新のChromeやEdgeなど)で余白部分に表示されます。

CSS GridやFlexbox、Webフォントは使えますか?

使えます。どちらの方法も最新のレイアウトに対応しています。Webフォントはページ内でリンクされているか、ファイルとして開いていれば読み込まれます。

関連ツール

作りたいものがありますか?

作りたい内容を教えてください。

シンプルなWebサイトから本格的なアプリ、AIソリューション、自動化、カスタムシステムまで、作りたいものをお聞かせください。

作りたいものをお聞かせください。すべてのお問い合わせを確認し、メールで返信します。

お問い合わせ

お問い合わせを受け付けました。

内容を確認し、メールで返信します。