PDFをHTMLで表示する方法！iframeやembedで埋め込みする方法を解説【コピペOK】
PDFをHTMLで表示させたい人
「PDFをWebサイトに埋め込みたい・・。HTMLで埋め込むことってできるのかな。簡単な方法があれば教えてください・
今回はPDFをWebサイトにて表示させる方法を紹介します。
使う機会はあまりないですが、いざという時に使えるようにしておくと便利です。コピペで使えるように解説していきますね。
本ブログの人気記事一覧
- »【無益】Web制作の収益報告【月50万稼ぎました／2023年2月】
- »30歳・未経験の僕が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の方が確実に高さを指定して表示したほうが便利です。
PDFとは？【知りたい方だけどうぞ！】
PDFとは、Adobe Systemsが開発したファイルフォーマットのことで、Portable Document Format（ポータブル・ドキュメント・フォーマット）と呼ばれているそうです。
PDFは、さまざまなコンピュータやモバイルデバイス上の異なるアプリケーションやオペレーティングシステムでも、同じように表示されることができるので、広く利用されています。
また、文書や画像、図表などの様々な種類の情報を含めることができ、最近だだと電子書籍、ウェブサイト、マニュアル、契約書、作成にも役立っています。
PDFをセキュリティにかける方法
基本的には、パスワードによるセキュリティの設定をかけておくといいでしょう。PDFファイルにアクセスするために、パスワードを設定することが可能です。
»Adobe公式：パスワードによるPDFの保護
以上になります。
参考になったらぜひリツイートしてくれると嬉しいです＼(^^)／
リツイートする
合わせて読みたい記事
