PDFをHTMLで表示する方法！iframeやembedで埋め込みする方法を解説【コピペOK】
人気記事【無料サポート付】サーバー開設から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の方が確実に高さを指定して表示したほうが便利です。
以上になります。
参考になったらぜひリツイートしてくれると嬉しいです＼(^^)／
リツイートする
この記事がイイなと思ったらシェアお願いします＼(^^)／
合わせて読みたい記事
