HTMLでPDFを表示する方法!iframeなどで埋め込みする方法を解説!

WebページにPDFを掲載するときには、HTMLでPDFを埋め込み表示することができます。この記事では、HTMLのiframeやembed、jQueryといったコマンドを使って、PDFをWebページに埋め込み表示する方法について詳しく解説します。

HTMLでPDFを表示する方法!iframeなどで埋め込みする方法を解説!のイメージ

目次

  1. 1PDFをHTMLで埋め込み表示したいという要望が増えている!
  2. 2PDFをHTMLのiframeを使って埋め込み表示する方法
  3. 3PDFをHTMLのembedを使って埋め込み表示する方法
  4. 4PDFをHTMLのjQueryを使って埋め込み表示する方法
  5. 5PDFをWebページにHTMLで埋め込み表示してみよう!

PDFをHTMLで埋め込み表示したいという要望が増えている!

Webサイトでは様々な情報を発信できます。しかし、ユーザーにとって見やすくて使いやすいWebページを作成しようとすると、詳細な情報まではなかなか掲載できません。そのような時に便利なのがPDFです。

PDFはWordやExcelなどで作成した文書ファイルをそのままの表示で掲載できるので、Webページだけでは伝えきれない詳細な情報まで掲載することが可能です。

以前であれば、サーバーにアップロードしたPDFファイルへのリンクをWebページへ貼って、ユーザーにはそのPDFをダウンロードして閲覧してもらうことが一般的でした。しかし、ここ最近、HTMLを使ってWebサイトに直接埋め込み表示したいという要望が、特に企業を中心に増えています

その理由は、情報の流出をできるだけ防ぐためです。ダウンロードされたPDFは簡単にコピーができてしまいます。しかし、HTMLで表示してダウンロードできないようにしてしまえばコピーがしにくくなります。

以前は難しかったPDFの埋め込み表示も、現在はHTMLを使って簡単にできるようになりました。この記事では、iframe、embed、jQueryの3つの方法でPDFをHTMLで埋め込み表示する方法をお伝えします。

ThumbExcelにPDFを貼り付ける4つの方法!エクセルへの挿入方法を解説!
Excel(エクセル)にPDFを貼り付けたいときには、どのような方法を使えばいいのでしょうか...

PDFをHTMLのiframeを使って埋め込み表示する方法

まずは最も簡単な方法のiframeのコマンドを使ってPDFを埋め込み表示する方法を解説します。iframeは、他のページに表示した内容をWebページに表示するためのコマンドです。サーバーにアップロードしたPDFのリンクをiframeタグで貼ることで、そのページ内に埋め込み表示できます。iframeを使った埋め込み表示のHTMLの記述方法は次の通りです。

<iframe src="PDFのURL" width="100%" height="100%"></iframe>

上記のHTMLタグではPDFの表示のサイズを%表示していますが、これだけではうまく表示できません。上記のように、画面サイズに対する割合で表示サイズを指定したい場合には、CSSに必ず次の記述を入れてください。

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

ThumbPDFのページサイズの確認・変更方法!A3やA4など大きさを拡大/縮小しよう
PDFのページサイズを確認したり、大きさを拡大したり縮小したりして変更するにはどうしたら良い...

PDFをHTMLのembedを使って埋め込み表示する方法

次にご紹介する、PDFを埋め込み表示できるHTMLコマンドはembedです。embedは「埋め込み」という意味の英単語で、HTMLではHTML5から採用されました。オブジェクトを埋め込み表示するときに使われます。embedタグでPDFを埋め込み表示するときのHTMLの記述方法は次のとおりです。

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

embedタグを使うときには、HTMLの多くのタグで必須の閉じタグが必要ない点に気をつけましょう。埋め込みタグの最後に</embed>と書いてしまうとエラーになってしまい、PDFが表示されません。

ThumbPDFのファイルサイズの変更方法!解像度を小さくして軽くする方法を解説!
PDFファイルを送信しようとすると、データ容量が大きすぎてファイルサイズの変更が必要なことが...

PDFをHTMLのjQueryを使って埋め込み表示する方法

最後にご紹介する、PDFを埋め込み表示できるHTMLコマンドはjQueryです。jQueryとは、JavaScriptをより簡単に記述できるように開発されたJavaScriptライブラリの一種類です。

jQueryを利用すれば、PDFへのリンクを自動的にiframeに変換してWebページに表示できるようになります。ただし、JavaScriptの知識がないので、自信がない方はiframeを利用したほうがいいでしょう。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="PDFのURL">PDF</a>

ThumbWEBページを保存する方法!サイト画面をPDFに変換する方法を解説!
WEBページ・WEBサイトをPDFファイルに変換・保存して確認したい人のため、本記事ではWE...

PDFをWebページにHTMLで埋め込み表示してみよう!

この記事では、PDFをHTMLでWebページに直接埋め込み表示する方法についてお伝えしました。埋め込み表示でダウンロードできないように設定すれば、PDFを簡単にコピーできなくなります。公開するべき情報の過度な流出に頭を悩ませている企業の担当者の方は、ぜひご紹介した方法でPDFの埋め込みをしてみましょう。

関連するまとめ

Original
この記事のライター
K.C
皆様のお役に立てる情報をお届けするために日々精進していきます。どうぞよろしくお願いします。