かんろぐ Written by kan

PDFをHTMLで表示する方法!iframeやembedで埋め込みする方法を解説【コピペOK】

CODE HTML/CSS

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート


PDFをHTMLで表示させたい人

「PDFをWebサイトに埋め込みたい・・。HTMLで埋め込むことってできるのかな。簡単な方法があれば教えてください・

今回はPDFをWebサイトにて表示させる方法を紹介します。
使う機会はあまりないですが、いざという時に使えるようにしておくと便利です。コピペで使えるように解説していきますね。

PDFをHTMLで表示する方法!iframeやembedで埋め込みする方法を解説【コピペOK】

まずはこちらを見てください。一番シンプルに使えるソースコードです。


<iframe src="https://xxxxxxxxxxx.pdf" width="600" height="332" frameborder="0" style="border:none;"></iframe>

xxxの部分がURLになります。

応用していくと、下記のようなこともできます。


<iframe src="https://xxxxxxxxxxx.pdf#page=1&scrollbar=0&view=Fit&viewrect=0,0,570,0" width="600" height="332" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>

簡単ですね\(^^)/

embedで表示する方法


<embed src="https://xxxxxxxxx.pdf" type="application/pdf" width="100%" height="100%">

こちらは閉じタグがないので注意してください。

補足:PDFの表示方法は5選あります

PDFを表示する方法は下記の5つです。

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

おそらくどのサイトもこの方法で解説していると思います。

今回はiframeとembedのみ解説しました。

PDFファイルパラメータの指定方法

下記の記事が参考になります。
Adobe Parameters for Opening PDF Files (日本語版) Adobe® Acrobat® SDK April 2007 Version 8.1 」 参照

%でも表示されるのですが、pxの方が確実に高さを指定して表示したほうが便利です。

以上になります。

参考になったらぜひリツイートしてくれると嬉しいです\(^^)/
リツイートする

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事