かんろぐ Written by kan

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

CODE HTML/CSS

PR ※当サイトではアフィリエイト広告を利用しています


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の方が確実に高さを指定して表示したほうが便利です。

PDFとは?【知りたい方だけどうぞ!】

PDFとは、Adobe Systemsが開発したファイルフォーマットのことで、Portable Document Format(ポータブル・ドキュメント・フォーマット)と呼ばれているそうです。

PDFは、さまざまなコンピュータやモバイルデバイス上の異なるアプリケーションやオペレーティングシステムでも、同じように表示されることができるので、広く利用されています。

また、文書や画像、図表などの様々な種類の情報を含めることができ、最近だだと電子書籍、ウェブサイト、マニュアル、契約書、作成にも役立っています。

PDFをセキュリティにかける方法

基本的には、パスワードによるセキュリティの設定をかけておくといいでしょう。PDFファイルにアクセスするために、パスワードを設定することが可能です。
»Adobe公式:パスワードによるPDFの保護

以上になります。

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

この記事を書いた人
かんろぐ/プロフィールアイコン
かん
未経験からWeb制作会社へ転職 | Webの楽しさや転職のあれこれを発信 | 転職サポート「CodeChange」主催 / 転職成功15名超 | WordPress・Shopify | CodeBegin転職講師 | マナブさん弟子 | カオマンガイとサウナ | ブロガー | ●かんろぐ運営/月間7,600PV達成 |

合わせて読みたい記事