HTMLでPDFを表示する方法！iframeなどで埋め込みする方法を解説！
WebページにPDFを掲載するときには、HTMLでPDFを埋め込み表示することができます。この記事では、HTMLのiframeやembed、jQueryといったコマンドを使って、PDFをWebページに埋め込み表示する方法について詳しく解説します。
目次
PDFをHTMLで埋め込み表示したいという要望が増えている！
Webサイトでは様々な情報を発信できます。しかし、ユーザーにとって見やすくて使いやすいWebページを作成しようとすると、詳細な情報まではなかなか掲載できません。そのような時に便利なのがPDFです。
PDFはWordやExcelなどで作成した文書ファイルをそのままの表示で掲載できるので、Webページだけでは伝えきれない詳細な情報まで掲載することが可能です。
以前であれば、サーバーにアップロードしたPDFファイルへのリンクをWebページへ貼って、ユーザーにはそのPDFをダウンロードして閲覧してもらうことが一般的でした。しかし、ここ最近、HTMLを使ってWebサイトに直接埋め込み表示したいという要望が、特に企業を中心に増えています。
その理由は、情報の流出をできるだけ防ぐためです。ダウンロードされたPDFは簡単にコピーができてしまいます。しかし、HTMLで表示してダウンロードできないようにしてしまえばコピーがしにくくなります。
以前は難しかったPDFの埋め込み表示も、現在はHTMLを使って簡単にできるようになりました。この記事では、iframe、embed、jQueryの3つの方法でPDFをHTMLで埋め込み表示する方法をお伝えします。
ExcelにPDFを貼り付ける4つの方法！エクセルへの挿入方法を解説！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>」
PDFのページサイズの確認・変更方法！A3やA4など大きさを拡大/縮小しよう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が表示されません。
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>」
WEBページを保存する方法！サイト画面をPDFに変換する方法を解説！PDFをWebページにHTMLで埋め込み表示してみよう！
この記事では、PDFをHTMLでWebページに直接埋め込み表示する方法についてお伝えしました。埋め込み表示でダウンロードできないように設定すれば、PDFを簡単にコピーできなくなります。公開するべき情報の過度な流出に頭を悩ませている企業の担当者の方は、ぜひご紹介した方法でPDFの埋め込みをしてみましょう。
