ブラウザで表示した状態のままウェブサイトを PDF に変換する方法

[最新更新] 2023年03月25日
[初回公開] 2021年10月19日

ブラウザで表示したウェブサイトやブログを PDF や印刷する際に、実際に画面に表示されているレイアウトとデザインでなく、印刷用にレイアウトされた状態で出力されることがあるため、画面に表示した状態のまま PDF にする方法を紹介する。

１．ブラウザで表示したときと PDF や印刷した時と異なる様子

ウェブサイトをブラウザで表示した時と PDF や印刷したときにレイアウトなどデザインが異なる様子としては、PDF または印刷時は背景が無くなったり、コンテンツが縦長になる傾向がある。

まず、ウェブサイトを通常通りブラウザで表示すると、下図のようにヘッダーやメニューなど各所で背景色が付いているのがわかる。
レイアウトはニュースサイトなどで多い複数に列が並んでいる状態で、ブラウザで表示した際に 1 画面内により多くの情報を表示できるようになっている。

このブラウザで表示されたウェブサイトを印刷操作から出力先を PDF に指定して書き出したものが下図となる。
レイアウトは 1 列となり、背景色が取れるなど全体的に文字主体の掲載内容に切り替わっているのが確認できる。

２．PDF や印刷時に表示と異なる原因

PDF や印刷時にブラウザの表示と異なる原因としては、ブラウザが印刷用紙サイズに自動的に合わせてくれている点と、ウェブサイト側が印刷用のデザインレイアウトを指定している場合である。

ブラウザが印刷用紙サイズに自動的に合わせる理由は、横長のディスプレイサイズが主流の最近のパソコンに対して、印刷用紙は昔ながらの縦方向の A4 用紙が未だに用いられているため、用紙の横幅にウェブサイトのコンテンツが収まるように印刷される。

また、スマホサイトのように縦に長いウェブサイトでもサイトの運営者が印刷用にデザインレイアウトを指定している場合は表示の通りに印刷されない。
運営者で指定されている場合は印刷に不要なメニューボタン類が削除されているなど利用者に配慮した設計となっていることが多い。

３．ブラウザで表示した状態のままウェブサイトを PDF に変換する方法

ウェブサイトをブラウザで表示した状態のままウェブサイトを PDF に変換する方法としては、印刷から PDF を書き出すのではなく、ブラウザに組み込まれるアドオンなどから直接 PDF に出力する。

例えば Adobe Acrobat においては Acrobat インストール時に自動的にブラウザにアドオンが組み込まれるので、この拡張機能を利用するとよい。

ただし、自動的にアドオンが有効にはならないため手動で有効化させる必要がある。
IE であればブラウザ上部のメニュー部の何も無い箇所を右クリックすると下図ように利用できる追加機能の一覧が表示される。

Acrobat の場合はブラウザにアドオンとして「Adobe Acrobat Create PDF Toolbar」が追加される。
追加機能の一覧より「Adobe Acrobat Create PDF Toolbar」をクリックすると「このアドオンを有効にしますか？」と問われるウィンドウが表示されるため、必要な項目にチェックを入れてボタン「有効にする」をクリックする。

Acrobat のアドオンを有効にするとブラウザの上部メニュー欄に PDF 関連のアイコンが追加される。
追加されたアイコンの中から「変換」をクリックして PDF に変換するとウェブサイトが印刷用のレイアウトではなく画面に表示している内容のまま PDF にすることができる。

関連記事