HTMLでPDFを表示したい
HTML上でPDFファイルを表示したいというときがあるでしょう。
PDFは様々なドキュメント情報をまとめることができる上に、他サイトのPDFを埋め込むこともできるので使いたい人も多いはずです。
HTMLページでPDFを表示する方法は複数あり、どの手段をとってもPDFを表示することはできます。
ですので、自分が気に入った方法を使ってPDF表示を試してみてください
HTMLでPDFを表示する方法5選
それでは早速HTMLでPDFを表示する方法を紹介していきます。
- iframeを使う
- embedを使う
- objectタグを使う
- PDF.jsを使う
- jQueryでPDFファイルへのリンクを変換する
iframeタグを使う
iframeでPDFを表示する場合は以下のように記述します。
これでPDFファイルが読み込まれます。
幅と高さを指定しない場合、PDFが全然表示されない状態になってしまうことがあるので気をつけましょう。
パーセント表記で指定することも出来ますが、高さをパーセント表記で指定した場合は高確率でサイズ指定がうまくいかないので覚えておいてください。
どうしても画面サイズなどから最適な幅と高さを指定したい場合は、以下のCSSを適用してください。
「vh」という単位を全く見たことがないという方も多いかと思いますが、これはビューポート(ブラウザで表示しているエリア)のサイズに対する割合を示しています。
ブラウザ表示領域の高さが1000pxで80vhを指定した場合は800pxとなり、ブラウザを拡大縮小すると自動的に調整されます。
WEB開発において非常に便利なので、覚えておくと良いでしょう。
embedタグを使う
embedはHTML5で正式に取り入れられたコンテンツ埋め込み用タグです。
embedタグを使う場合は以下のように記述します。
記述時の注意点として、
- 終了タグの技術が必要ないこと
- 読み込めなかった際の代替テキストを記述できないこと
終了タグ「</embed>」を記述すると文法エラーとなるので注意してください。
また、iframeと違って代替テキストの記述ができないため、読み込みに失敗した際は読み込みエラーの枠だけが表示されて、かなり不恰好になります。
ですので、出来る限りiframeタグで対応した方がいいかもしれません。
objectタグを使う
あまり知ってる人は多くありませんが、objectタグを使ってPDFを表示することも可能です。
最新のコンテンツ埋め込み用タグはiframeですので、objectを使うのであればiframeを採用すると良いでしょう。
PDF.jsを使う
キレイにPDFを埋め込みたいのであればPDF.jsを使うといいかもしれません。
埋め込み設定を細く定義することができ、フルスクリーン時は別タブで開くといった設定ができます。それに加えてスマホでもしっかり表示することが可能です。
通常、外部sciptファイルを使用する際はHTMLページに埋め込んで使いますが、PDF.jsは違います。
PDF.jsが用意しているviewer.htmlに対してPDFファイルのURLを渡すことで表示できます。
少し癖のある使い方ですのでなれるまで大変かもしれませんが、使う場合は何度か試してみるといいでしょう。
PDF.jsは以下のページからダウンロードするようにしてください。
jQueryでPDFファイルへのURLを変換する
全てのPDFファイルへのアンカーリンクをiframenに変換したい場合は、jQueryを読み込んだ上で、以下のコードを貼り付けてください。
ただただPDFを埋め込みたいだけであれば直接iframeを記述するのが一番です。