HTMLをPDFで保存する方法|ファイルから変換すると元のURLが消える
以前「名前を付けて保存」で残しておいたWebページのHTMLファイルがある。人に渡したり、印刷したりするために、これをPDFにしたい。
HTMLファイルは、ブラウザで開いて印刷すればPDFになります。手順そのものは難しくありません。
ただ、手元のファイルから作ったPDFには、見落としやすい違いが1つあります。PDFに入るURLと日付が、元のページのものではなくなることです。
私はArchiveSealというWebページ保存用のChrome拡張機能を開発していて、PDFの書き出しも作っています。この記事では、手元のHTMLファイルをPDFにする手順と、そのときに消えてしまう情報を残す方法をまとめます。
この記事では以下の3つを解説します。
- 手元のHTMLファイルを、ChromeでPDFにする手順
- 開いたときに画像が出ないなら、PDFにする前に直すこと
- 変換したPDFから消える、元のURLと日付の残し方
「HTMLをPDFに」は、2つの場面に分かれます
「HTMLをPDFで保存したい」と言うとき、手元にあるものは2通りです。
| 場面 | 手元にあるもの | PDFにする元 |
|---|---|---|
| ① 今見ているWebページをPDFにしたい | ブラウザで開いているページ | 開いているページ |
| ② 保存済みのHTMLファイルをPDFにしたい | パソコンの中の .html ファイル | 手元のファイル |
①は、開いているページをそのまま印刷してPDFにすれば済みます。方式ごとの違いはWebページをPDFで保存する方法にまとめています。
この記事で扱うのは②です。やることは①とほとんど同じですが、PDFにする元がWeb上のページではなく、パソコンの中のファイルになるので、仕上がったPDFに入る情報が変わります。
手元のHTMLファイルをPDFにする手順
Chromeを使う場合の流れです。
- HTMLファイルを、Chromeのウィンドウにドラッグして開きます。ファイルをダブルクリックすると、既定のブラウザで開きます
Ctrl + P(Macは⌘ + P)で印刷画面を開きます- 「送信先」を PDFに保存 に変更します
- 必要なら「詳細設定」で背景のグラフィックや余白を整えます
- 「保存」を押して、ファイル名を付けます
仕上がりを整える設定は、Web上のページを印刷するときと共通です。背景が白くなる、右端が切れるといった調整はChromeの印刷設定で扱っています。
開いたときに画像が出ないなら、PDFにする前に直す
印刷はブラウザに映っているものをPDFにします。開いた時点で画像が欠けていれば、PDFでも欠けたままです。印刷の前に、画面を一度見ておいてください。
画像が出ない理由は、主に2つです。
1つ目は、画像のフォルダが一緒にないことです。ブラウザの「名前を付けて保存」でウェブページ、完全を選ぶと、HTMLファイルと画像のフォルダがセットで作られます。HTMLファイルだけを別の場所へ移すと、画像を見つけられなくなります。フォルダを同じ場所に戻してから開き直してください。置き場所の辿り方は保存したページの辿り方にまとめています。
2つ目は、画像が別のサイトから読み込まれていることです。HTMLファイルの中には、画像そのものではなく「どこから画像を取ってくるか」だけが書かれている場合があります。その場合、インターネットにつながっていないと画像が出ません。元のサイトが画像を消していれば、つながっていても出ないことがあります。
画像が出るかどうかは、PDFにする段階ではなく、HTMLファイルを保存した段階でほぼ決まっています。次からファイルが2つに分かれないように残したいなら、ページを1つのHTMLファイルに畳む方法も選べます。
変換したPDFから、元のURLと日付が消えます
ここがこの記事の本題です。
Chromeの印刷では、初期状態でページの上下に日付・URL・ページ番号が入ります。Web上のページを印刷したときは、ここに元のページのURLと、印刷した日が入ります。
ところが、手元のファイルを開いて印刷すると、URLの欄に入るのはパソコンの中のファイルの場所です。file:/// で始まる、自分のパソコンの住所のようなものになります。日付の欄に入るのも、PDFに変換した日です。
| PDFに入る情報 | Web上のページから作ったとき | 手元のファイルから作ったとき |
|---|---|---|
| URL | 元のページのURL | パソコンの中のファイルの場所(file:///…) |
| 日付 | 印刷した日(そのページを見た日) | 変換した日(元のページを保存した日とは別) |
自分で読むだけなら困りません。困るのは、あとで人に渡したときや、数か月後に自分で見返したときです。「これはどのサイトの、いつ時点の内容か」を、PDFからは答えられません。
変換する前に、2つを控える
PDFから消える情報は、変換する前なら取り戻せることがあります。控えておくのは次の2つです。
1. 元のページのURL
まず、ブラウザの履歴やブックマークに、そのページのURLが残っていないか探してください。
見つからなければ、HTMLファイルをテキストエディタで開いてみます。ページによっては、ファイルの中に canonical や og:url という名前で、そのページの正式なURLが書かれていることがあります。書かれていないページもあるので、見つからなければ履歴を当たるほかありません。
2. 元のページを保存した日
パソコンが表示するファイルの日付は、当てになりません。コピーしたり、別のパソコンへ移したりすると変わることがあり、ページの内容がその日のものだという保証にはならないからです。覚えているうちに、ファイル名かメモに書いておきます。
控えたものを、PDFと一緒に残す
控えた2つは、PDFのファイル名に入れておくのがいちばん確実です。
- 例:
2026-10-23_サイト名_ページの題名.pdf
URLはファイル名に入りきらないことが多いので、同じフォルダにメモを1つ置くか、PDFを渡すときの本文に書き添えます。
元のページがまだ開けるなら、そちらからPDFにする
ここまでの手間は、元のページがもう開けないときのためのものです。
元のページがまだWeb上にあるなら、手元のHTMLファイルではなく、元のページを開いてPDFにしてください。ヘッダーに元のURLと今日の日付が入り、画像も元のサイトから読み込まれます。
手元のHTMLファイルからPDFを作るのは、元のページが消えたあとの最後の手段と考えておくと、URLと日付を失わずに済みます。長いページで表が崩れる、画像の位置がずれるといった仕上がりの問題は、どちらから作っても起こりえます。原因の見分け方はPDF化で崩れる原因で整理しました。
ArchiveSealでの扱い
Chrome拡張の ArchiveSeal は、画面の見た目をそのまま画像として残し、あわせてページの本文テキスト・URL・保存日時を取得して残す方式です。印刷用の再レイアウトを介さないため、崩れが起きにくくなります。残した PDF のヘッダーには URL と日時が入ります。
保存したページは管理画面に残り、あとから1枚の A4 PDF として書き出せます。あとで書き出しても、ヘッダーに入るのは元のページのURLと、そのページを保存した日時です。書き出した日ではありません。この記事で扱った「ファイルから作るとURLと日付が消える」ことが起きません。
Pro 版では、ページの HTML を保存し、1つのファイルとしてダウンロードすることもできます。拡張機能がないパソコンでも、インターネットに接続していなくても開けます。
基本の保存・グループ整理・画像PDF(A4縮小)の出力と、保存したページの本文の閲覧は無料で使えます。
Pro の機能は 10 日間無料で試せます。登録も決済情報の入力も不要で、期間が終わると自動的に Free に戻ります。
よくある質問
HTMLファイルをPDFにするには、どうすればよいですか?
HTMLファイルをChromeなどのブラウザで開き、印刷画面からPDFとして保存します。Chromeなら、ファイルをウィンドウにドラッグして開き、Ctrl + P(Macは ⌘ + P)で印刷画面を出して、送信先を「PDFに保存」に変えてから保存を押します。背景や余白の調整は、Web上のページを印刷するときと同じです。
HTMLファイルをPDFにしたら、画像が抜けました。
印刷はブラウザに映っているものをPDFにするので、開いた時点で画像が欠けていればPDFでも欠けます。よくある理由は、名前を付けて保存で一緒に作られた画像のフォルダがHTMLファイルと同じ場所にないことと、画像が別のサイトから読み込まれていてインターネットにつながっていないことの2つです。フォルダを同じ場所に戻すか、インターネットにつないだ状態で開き直してから印刷してください。
変換したPDFのURLが file:/// で始まっています。
手元のファイルを開いて印刷すると、ヘッダーやフッターのURLの欄には、元のページのURLではなくパソコンの中のファイルの場所が入ります。日付の欄も、PDFに変換した日になります。元のページのURLと保存した日を残したいときは、変換する前に控えて、ファイル名やメモに書いておいてください。元のページがまだ開けるなら、そちらを開いてPDFにすると元のURLが入ります。
HTMLファイルから元のページのURLを調べる方法はありますか?
まずブラウザの履歴やブックマークを探してください。見つからなければ、HTMLファイルをテキストエディタで開き、canonical や og:url という語を探します。ページによっては、そこにそのページの正式なURLが書かれています。書かれていないページもあるので、その場合は履歴などから探すほかありません。
HTMLファイルのままと、PDFにするのとでは、どちらで残すのがよいですか?
使い道で選びます。PDFは1つのファイルで人に渡しやすく、多くのパソコンやスマホでそのまま開けます。HTMLファイルは、画像のフォルダが離れたり、別のサイトの画像がネットにつながっていないと出なかったりすることがあります。どちらで残す場合も、元のページのURLと保存した日を一緒に残しておくと、あとでどこのいつの内容か分からなくなりません。
まとめ
- 「HTMLをPDFに」は、今見ているページから作る場合と、手元のHTMLファイルから作る場合に分かれる
- 手元のファイルは、ブラウザで開いて印刷画面からPDFに保存すればPDFになる
- 開いた時点で画像が欠けていれば、PDFでも欠ける。画像のフォルダの置き場所と、ネットの接続を先に確かめる
- 手元のファイルから作ったPDFは、URLの欄がファイルの場所になり、日付も変換した日になる
- 変換する前に、元のページのURLと保存した日を控えて、ファイル名やメモに残す
- 元のページがまだ開けるなら、ファイルではなく元のページからPDFにする
HTMLファイルをPDFにするのは、数十秒でできます。その数十秒の前に、どこのページを、いつ残したものかを書き留めておくと、あとで見返したPDFが「出どころの分からない1枚」になりません。