WEBページHTMLをPDFに変換する方法
HTMLページをPDFに保存する方法についてご紹介します。
ブラウザの保存機能を使うと簡単ですが、画像が映らない場合があります。
PCページならオンラインツールがバッチリ保存できます。スマホページならiPhone等のプリント機能が便利です。
WEBページHTMLをPDFに変換する方法
会議や打ち合わせをする際にWEBページをそのまま印刷して資料として持参する事がよくあります。
もちろんPC画面を会議資料として共有する事も浸透していますが、いまだ紙ベースを使った会議がまだまだ現役です。
基本的には閲覧ユーザー側が任意でPDF保存する訳ですから、管理者側で機能を用意するケースは少ないと思います。
そうしなくてもオンラインツールを使えば簡単にPDF保存する事ができますからね。
本記事ではHTMLをPDFで保存する方法についてご紹介します。
様々なパターンでの保存方法を紹介しますが、画像やレイアウトまで見たまま保存したいならオンラインツールでしょう。
スマホページはiPhoneなどでPDF保存する方がよさそうです。
ブラウザを使ってHTMLをPDFに変換する
まずはブラウザを使ったWEBページのPDF変換からご紹介します。
Google Chromeの場合
PDFに変換したいWEBページを開いて、Ctrl＋Pを押し印刷パネルを表示させましょう。
印刷パネルの送信先ボックスを「PDFに保存」にあわせ、印刷ボタンを押します。
PC上の保存場所を聞かれますので、保存したい場所を選択して。
これで対象のHTMLファイルがPDFに変換されます。
Microsoft Edgeの場合
Edgeの場合もほぼ同じです。
Ctrl＋Pを押すと印刷パネルが出てきますので、プリンターの欄を「PDFとして保存」に合わせます。
保存ボタンを押し、場所を指定して「保存」を押すと完了です。
注意
ChromeでもEdgeでもそうですが、HTMLにLazy-loadなど遅延機能を付けている画像は表示されない場合があります。
さらにWEBページによっては、Ctrl＋Pや印刷自体が効かないページもあります。
オンラインツールを使ってHTMLをPDFに変換する
対象のWEBページURLを入力する事で、PDFに変換してくれるオンラインツールがあります。
数は非常に多いのですが、中には上手くいかないものもあります。
・日本語が文字化けする
・2回目から有料になる
・エラーで変換がされない
今回は確認して、こういった問題がでないものをピックアップしてみました。
他にもたくさんあるので興味があれば探してみて下さい。
PDFmyURL
PDFmyURLは、URLを入力するだけでPDFに変換してくれるサービスです。
対象のURLを入力するだけですぐにPDFに変換してくれる、とても使いやすいツールです。
URLを入力したら右隣にある「Save as PDF」を押します。
「Thank you for using our service!」のポップアップ画面がでますが、何もせずにしばらく待ちましょう。
PDFのダウンロードがされてきます。ポップアップ画面は閉じてOKです。
sodapdf
簡単かつ無料でHTMLファイルをPDFに簡単に変換できるツールです。
URLを入力して「PDFを取得」を押すと100％までゲージが伸びていきます。
ダウンロード前に全画面広告（黒バック）が表示されるので初見は迷います。
少し待つと、ファイルの準備ができましたと表示され「ファイルをダウンロード」のボタンが押せるようになります。
Pdfcrowd
英語サイトです。「URL」の入力か「File」アップを選ぶ事ができます。
どちらかを選んで「Start」を押すと、4種のデバイス向けにプレビューが表示されます。
各プレビュー欄左下に出る「Show PDF」ボタンを押すと、管理者ツールの様な画面が出てきます。
右下にプレビューが表示されていますので、その右上にある「ダウンロード」アイコンを探して押しましょう。
これでPDFをダウンロードできます。
JavascriptでHTMLをPDFに変換する
ここまではユーザー側が任意にHTMLをPDFに変換する方法を紹介しました。
次はWEBページ上にボタンを設置し、それを押すとPDFへ変換される仕組みを紹介します。
つまりHTML管理者側が、ユーザーのためにPDF変換機能を用意するパターンですね。
ウィンドウオブジェクトを使用した変換
Javascriptによりウィンドウオブジェクトを作成した変換を実現してきます。
PDFに変換するドキュメントを別途作成し、HTMLテキストを書き込んでPDFとして出力します。
ソースコード
<html> <head> <title>HTMLをPDFへ変換するJavascript</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $("#btnPrint").live("click", function () { var divContents = $("#text").html(); var printWindow = window.open('', '', 'height=400,width=800'); printWindow.document.write('ここにHTMLソースを入れます'); printWindow.document.close(); printWindow.print(); }); </script> </head> <body> <h2="text">HtmlをPDFへ変換</h2> <form> <input type="button" value="PDFへ変換" id="btnPrint"> </form> </body> </html>
サンプル
Jsの解説
btnPrintボタンを押す事で専用のオブジェクトウィンドウと印刷ダイアログが開きます。
印刷の種類は「PDFに保存」（Google Chromeの場合）が選択されているはずです。
隣りにプレビューが表示されていますので、保存を押すとプレビューのPDF内容が保存されるという訳です。
見てお分かりと思いますが、実際のHTMLページとは別に印刷向けのHTMLソースをPDFとして変換する形です。
このHTMLソースを入れる箇所は、script内の「ここにHTMLソースを入れます」としている部分です。ここにPDF化させたいページのHTMLを丸ごと入れる訳ですね。
注意
scriptタグでjsファイルを読み込む部分は機能しなくなるので、この記述は外す必要があります。
CSSなども効かない場合があります。
iPhoneでHTMLをPDFに変換する
最後にiPhoneで見ているWEBページをPDFに変換する方法です。
方法は主に2つあります。
マークアップからPDF保存する方法
これはSafariでのみ使える方法であり、レイアウトが崩れにくく印刷範囲の調整もしやすいです。
まずはPDF保存させたいページを開いて、スクリーンショットで撮影します。
すると左下にサムネイルが表示されますので、サムネイル自体をタップしましょう。
マークアップ機能の画面になります。上部タブで「フルページ」を選択します。
もし指定範囲をPDF化したい場合は、フルページを選んだ後にマークアップ機能の「範囲指定アイコン」をタップします。
これで範囲指定や調整ができます。
右上にある「完了」ボタンを押し、下に出てくる「"ファイル"に保存」ボタンをタップします。
保存先を選択して右上の「保存」を押せば、PDFの保存は完了です。
印刷メニューからPDF保存する方法
これはSafari以外でChromeなどのブラウザを使っている場合です。
PDF化したいページで「共有」アイコンを押し、「プリント」をタップします。
WEBページを全て印刷する場合
プリントオプション画面が表示されます。
この状態で右上の「プリント」をタップすると、全ページが保存対象になります。
メニューの中から「"ファイル"に保存」をタップしましょう。
保存先を選んで右上の「保存」を押せば、PDF保存完了です。
複数ページを印刷指定する場合
PDF化するページを範囲指定したい場合は、先ほどのプリントオプション画面で「範囲」を開きます。
ここでページ単位で指定して右上のプリントを押すと、対象範囲ページがPDF保存されます。
