PDFをダウンロードする形式で表示するのではなく、Webページ上に埋め込むようにしてPDFを表示させたい、という場合があります。この場合、HTMLのタグでPDF埋め込みでの表示が可能です。PDFを埋め込むためのHTMLタグの紹介をしていきます。
HTMLにPDFを組み込む際、Webページ上に埋め込み表示することができます。PDFを表示させるHTMLタグを順に説明します。
いずれのHTMLタグも親要素すべてに「height」の値の設定が必要です。最低限下記のCSSは設定しておいてください。
| html, body { height: 100%; width: 100%; margin: 0; } |
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は上記のように表示されます。
HTML5になってから正式に採用されたPDF等の埋め込み表示タグです。
| <embed src="PDFのURL" type="application/pdf" width="100%" height="100%"> |
HTMLタグの記述がシンプルなので、embedタグのほうが使いやすく感じる人もいます。
embedタグに終了タグはなく、「</embed>」を入力すると記述エラーが生じます。また、終了タグがないためiframeのようにPDFの代替テキストの設定もできません。
iframeタグ以前から存在するPDF等の埋め込み表示ができるHTMLタグです。
| <object data="PDFのURL" type="application/pdf" width="100%" height="100%"></object> |
PDFの埋め込み表示時の動作はiframeタグと同様です。PDFの代替テキストも設定できます。
iframeのほうがPDF埋め込み表示タグとしては最新なので、objectタグをPDF埋め込み表示タグとして利用する可能性は低い場合があります。
PDF.jsが用意している「viewer.html」へPDFのURLを渡すという方法でPDFを埋め込み表示できます。PC・スマホともにPDFを柔軟に表示させることも可能です。
癖があるため慣れない場合は他のHTMLタグでPDFを表示させたほうが分かりやすいです。またAMPページではPDF.jsの利用ができません。
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> |
1 / 2
続きを読む