ウェブサイトをブラウザの見た目のまま PDF に変換する方法

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

ウェブサイトをブラウザの見た目のまま PDF に変換する方法




1.ブラウザで表示したときと PDF にしたときの違い


ウェブサイトをブラウザで表示したときと PDF にしたときにレイアウトなどデザインが下図のように異なることがある。
まず、ウェブサイトを通常通りブラウザで表示すると、レイアウトは 2 列になるなど複数カラムとなり、ヘッダーやメニューなど各所で背景色が付いているのがわかる。

ウェブサイトをブラウザで見た様子



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

ウェブサイトを PDF で見た様子


Adobe Acrobat Pro DC 12か月版(最新PDF)|Windows/Mac対応|オンラインコード版


2.ブラウザの見た目のまま PDF に変換する方法


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

ブラウザのアドオンを利用するためには例えば Adobe Acrobat においては Acrobat インストール時に自動的にアドオンが組み込まれる。
ただし、自動的にアドオンが有効にはならないため手動で有効化させる必要がある。
IE であればブラウザ上部のメニュー部の何も無い箇所を右クリックすると利用できる追加機能の一覧が表示される。

ブラウザの追加機能一覧




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

アドオンの有効


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

関連記事