2021年03月03日更新
HTMLにPDFを埋め込み表示する方法を紹介！
PDFをダウンロードする形式で表示するのではなく、Webページ上に埋め込むようにしてPDFを表示させたい、という場合があります。この場合、HTMLのタグでPDF埋め込みでの表示が可能です。PDFを埋め込むためのHTMLタグの紹介をしていきます。
HTMLにPDFを埋め込み表示する方法
HTMLにPDFを組み込む際、Webページ上に埋め込み表示することができます。PDFを表示させるHTMLタグを順に説明します。
いずれのHTMLタグも親要素すべてに「height」の値の設定が必要です。最低限下記のCSSは設定しておいてください。
| html, body { height: 100%; width: 100%; margin: 0; } |
iframeタグを使用
HTMLタグ「iframe」でPDFの表示ができます。赤字はPDFのURL、青字は適宜変更部分です（以下共通）。
| <iframe src="PDFのURL"> <p> <b>表示できない場合の代替テキスト</b> <a href="PDFのURL" width="100%" height="100%">PDFファイルを表示</a> </p> </iframe> |
PDFは上記のように表示されます。
embedタグを使用
HTML5になってから正式に採用されたPDF等の埋め込み表示タグです。
| <embed src="PDFのURL" type="application/pdf" width="100%" height="100%"> |
HTMLタグの記述がシンプルなので、embedタグのほうが使いやすく感じる人もいます。
注意点
embedタグに終了タグはなく、「</embed>」を入力すると記述エラーが生じます。また、終了タグがないためiframeのようにPDFの代替テキストの設定もできません。
objectタグを使用
iframeタグ以前から存在するPDF等の埋め込み表示ができるHTMLタグです。
| <object data="PDFのURL" type="application/pdf" width="100%" height="100%"></object> |
PDFの埋め込み表示時の動作はiframeタグと同様です。PDFの代替テキストも設定できます。
注意点
iframeのほうがPDF埋め込み表示タグとしては最新なので、objectタグをPDF埋め込み表示タグとして利用する可能性は低い場合があります。
PDF.jsを使用
PDF.jsが用意している「viewer.html」へPDFのURLを渡すという方法でPDFを埋め込み表示できます。PC・スマホともにPDFを柔軟に表示させることも可能です。
注意点
癖があるため慣れない場合は他のHTMLタグでPDFを表示させたほうが分かりやすいです。またAMPページではPDF.jsの利用ができません。
jQueryを使用
jQueryで、PDFへのリンクすべてを自動的にiframe等の別のPDF埋め込み表示タグに変換したタグを追加できます。
PDFのリンク（HTMLタグ）は通常通りで、jQueryの読み込みタグと、下記のスクリプトの読み込みでPDF埋め込み表示ができます。こちらもAMPページでは利用できません。
| <script> jQuery(function () { $("body a").filter('[href*=".pdf"]').each(function () { var this_file_url = $(this).attr("href"); $(this).before('<iframe src="' + this_file_url + '" width="100%" height="90%"></iframe>'); }); }); </script> |
jQueryの知識が多少あれば、PDF埋め込み表示する対象を指定できますが今回は割愛します。
iframe以外のPDFの表示タグに変換することも可能です。
最後に
HTMLタグの利用でPDFを埋め込み表示できます。タグの知識やjQueryの知識等PDF埋め込みに必要な知識はまちまちですが、やり方が分かればPDFの埋め込み表示は難しくないため、色々とHTMLタグを使ってPDF埋め込み表示を試してみてください。
【Safari】iPhoneでWebサイトからPDFファイルのダウンロード/保存方法！
Google Chromeでファイルをダウンロードできない時の対処法
Androidでダウンロードしたファイル(PDF等)の保存先はどこ？