2021年03月03日更新

HTMLにPDFを埋め込み表示する方法を紹介！

PDFをダウンロードする形式で表示するのではなく、Webページ上に埋め込むようにしてPDFを表示させたい、という場合があります。この場合、HTMLのタグでPDF埋め込みでの表示が可能です。PDFを埋め込むためのHTMLタグの紹介をしていきます。

HTMLにPDFを埋め込み表示する方法を紹介！のイメージ

目次

  1. 1HTMLにPDFを埋め込み表示する方法
  2. ・iframeタグを使用
  3. ・embedタグを使用
  4. ・objectタグを使用
  5. ・PDF.jsを使用
  6. ・jQueryを使用
  7. ・最後に

HTMLにPDFを埋め込み表示する方法

HTMLにPDFを組み込む際、Webページ上に埋め込み表示することができます。PDFを表示させるHTMLタグを順に説明します。

いずれのHTMLタグも親要素すべてに「height」の値の設定が必要です。最低限下記のCSSは設定しておいてください。

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

iframeタグを使用

iframeタグでのPDF埋め込みコード使用例

HTMLタグ「iframe」でPDFの表示ができます。赤字はPDFのURL、青字は適宜変更部分です（以下共通）。

<iframe src="PDFのURL">
   <p>
      <b>表示できない場合の代替テキスト</b>
      <a href="PDFのURL" width="100%" height="100%">PDFファイルを表示</a>
   </p>
</iframe>

iframeタグでのPDF表示例

PDFは上記のように表示されます。

embedタグを使用

embedタグでのPDF埋め込みコード使用例

HTML5になってから正式に採用されたPDF等の埋め込み表示タグです。

<embed src="PDFのURL" type="application/pdf" width="100%" height="100%">

embedタグでのPDF表示例

HTMLタグの記述がシンプルなので、embedタグのほうが使いやすく感じる人もいます。

注意点

embedタグに終了タグはなく、「</embed>」を入力すると記述エラーが生じます。また、終了タグがないためiframeのようにPDFの代替テキストの設定もできません。

objectタグを使用

objectタグでのPDF埋め込みコード使用例

iframeタグ以前から存在するPDF等の埋め込み表示ができるHTMLタグです。

<object data="PDFのURL" type="application/pdf" width="100%" height="100%"></object>

objectタグでのPDF表示例

PDFの埋め込み表示時の動作はiframeタグと同様です。PDFの代替テキストも設定できます。

注意点

iframeのほうがPDF埋め込み表示タグとしては最新なので、objectタグをPDF埋め込み表示タグとして利用する可能性は低い場合があります。

PDF.jsを使用

PDF.jsが用意している「viewer.html」へPDFのURLを渡すという方法でPDFを埋め込み表示できます。PC・スマホともにPDFを柔軟に表示させることも可能です。

Getting Started
A general-purpose, web standards-based platform for parsing and rendering PDFs.

注意点

癖があるため慣れない場合は他のHTMLタグでPDFを表示させたほうが分かりやすいです。またAMPページではPDF.jsの利用ができません。

jQueryを使用

PDF埋め込みタグへ変換して追加する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表示例

jQueryの知識が多少あれば、PDF埋め込み表示する対象を指定できますが今回は割愛します。

iframe以外のタグでも可能

iframe以外のPDFの表示タグに変換することも可能です。

最後に

HTMLタグの利用でPDFを埋め込み表示できます。タグの知識やjQueryの知識等PDF埋め込みに必要な知識はまちまちですが、やり方が分かればPDFの埋め込み表示は難しくないため、色々とHTMLタグを使ってPDF埋め込み表示を試してみてください。

Thumb【Safari】iPhoneでWebサイトからPDFファイルのダウンロード/保存方法！
iPhoneの標準ブラウザであるSafariでWebサイトからPDFファイルをダウンロードし...
ThumbGoogle Chromeでファイルをダウンロードできない時の対処法
Google Chromeでファイルがダウンロードできない時の対処法をいくつか紹介しています...
ThumbAndroidでダウンロードしたファイル(PDF等)の保存先はどこ？
Android(アンドロイド)端末でダウンロードしたPDFファイルなどがどこに保存されたか分...

関連するまとめ

関連するキーワード

Original
この記事のライター
八千草　蛍
分かりやすく気軽に読める記事を書いてまいりたいと思います。よろしくお願いいたします。

人気の記事

人気のあるまとめランキング

新着一覧

最近公開されたまとめ