HTMLでPDFを表示する方法5選！PDFの埋め込みをするには？

HTMLでPDFを表示したい

HTML上でPDFファイルを表示したいというときがあるでしょう。

PDFは様々なドキュメント情報をまとめることができる上に、他サイトのPDFを埋め込むこともできるので使いたい人も多いはずです。

HTMLページでPDFを表示する方法は複数あり、どの手段をとってもPDFを表示することはできます。

ですので、自分が気に入った方法を使ってPDF表示を試してみてください

HTMLでPDFを表示する方法5選

それでは早速HTMLでPDFを表示する方法を紹介していきます。

PDFを表示する方法は大きく分けて以下の5つです。

iframeを使う
embedを使う
objectタグを使う
PDF.jsを使う
jQueryでPDFファイルへのリンクを変換する

iframeタグを使う

一番簡単な方法がiframeタグを使うことです。

iframeでPDFを表示する場合は以下のように記述します。

<iframe src="https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf" width="100%" height="100%"></iframe>

結果

これでPDFファイルが読み込まれます。

幅と高さを指定しない場合、PDFが全然表示されない状態になってしまうことがあるので気をつけましょう。

パーセント表記で指定することも出来ますが、高さをパーセント表記で指定した場合は高確率でサイズ指定がうまくいかないので覚えておいてください。

どうしても画面サイズなどから最適な幅と高さを指定したい場合は、以下のCSSを適用してください。

<style>
iframe[src$=".pdf"]{
    width:100%;
    height:80vh;
}
</style>

「vh」という単位を全く見たことがないという方も多いかと思いますが、これはビューポート(ブラウザで表示しているエリア)のサイズに対する割合を示しています。

ブラウザ表示領域の高さが1000pxで80vhを指定した場合は800pxとなり、ブラウザを拡大縮小すると自動的に調整されます。

WEB開発において非常に便利なので、覚えておくと良いでしょう。

embedタグを使う

embedはHTML5で正式に取り入れられたコンテンツ埋め込み用タグです。

embedタグを使う場合は以下のように記述します。

<embed src="https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf" type="application/pdf" width="100%" height="100%">

結果

embedは記述が非常にシンプルなので、iframeよりも見やすいという方がいるかもしれません。

記述時の注意点として、

終了タグの技術が必要ないこと
読み込めなかった際の代替テキストを記述できないこと

終了タグ「</embed>」を記述すると文法エラーとなるので注意してください。

また、iframeと違って代替テキストの記述ができないため、読み込みに失敗した際は読み込みエラーの枠だけが表示されて、かなり不恰好になります。

ですので、出来る限りiframeタグで対応した方がいいかもしれません。

objectタグを使う

あまり知ってる人は多くありませんが、objectタグを使ってPDFを表示することも可能です。

<object data="https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf" type="application/pdf" width="100%" height="100%">
</object>

結果

objectタグは、iframeが登場する前からあったコンテンツ埋め込みタグで、PDFの埋め込みであればiframeと同じ動作をします。

最新のコンテンツ埋め込み用タグはiframeですので、objectを使うのであればiframeを採用すると良いでしょう。

PDF.jsを使う

キレイにPDFを埋め込みたいのであればPDF.jsを使うといいかもしれません。

埋め込み設定を細く定義することができ、フルスクリーン時は別タブで開くといった設定ができます。それに加えてスマホでもしっかり表示することが可能です。

PDF.js

<iframe width="400" height="300" src="http://localhost/pdfjs-1.4.20-dist/web/viewer.html?file=https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf">

結果

通常、外部sciptファイルを使用する際はHTMLページに埋め込んで使いますが、PDF.jsは違います。

PDF.jsが用意しているviewer.htmlに対してPDFファイルのURLを渡すことで表示できます。

少し癖のある使い方ですのでなれるまで大変かもしれませんが、使う場合は何度か試してみるといいでしょう。

PDF.jsは以下のページからダウンロードするようにしてください。

外部サイトPDF.js - Getting Started

ちなみにこの方法はAMPページでは使えないため、AMP対応を行なっている場合は使わないようにしましょう。AMPページでもPDFを埋め込みたいのであればiframeがおすすめです。

jQueryでPDFファイルへのURLを変換する

jQueryを使えば、PDFファイルへのURLを自動的にiframeに変換してPDFを表示することも可能です。

全てのPDFファイルへのアンカーリンクをiframenに変換したい場合は、jQueryを読み込んだ上で、以下のコードを貼り付けてください。

<script>
jQuery(function(){
	$("body a").filter('[href*=".pdf"]').each(function(){
		var this_file_url = $(this).attr("href");
		$(this).before( '<object class="pdf_js_view" width="100%" height="700px" data="' + this_file_url + '"></object>' );
	});
});
</script>
<a href="https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf">PDF</a>

結果

こちらはJavaScriptの知識が必要な上に、AMPページでは動作しないので注意しましょう。

ただただPDFを埋め込みたいだけであれば直接iframeを記述するのが一番です。