Home > 活用Tips > HTMLでPDFを表示する方法を紹介

HTMLでPDFを表示する方法

WebページはすべてHTMLという言語で作成されており、動画・音声・ドキュメントなどさまざまなメディアを表示することができます。

今回は、その中から「PDF」をHTML上で表示する方法をご紹介します。PDF以外のメディアにも応用できますので、ぜひ参考にしてみてください。


目次


Part1:HTMLでPDFを表示する方法を紹介

●iframeを使う

<iframe>はInline FRAMEの略で、ドキュメントなどを画面上にインラインで表示することができます。


HTMLでPDFを表示する


◇属性の説明

[src]:フレーム内に表示するドキュメントなどのURLを指定します。
[width]:フレームの横幅をピクセル、またはパーセンテージで指定します。
[height]:フレームの高さをピクセル、またはパーセンテージで指定します。


なお、フレームのサイズをパーセンテージで指定する場合は、正常に表示されないことがあります。その場合は、CSSでスタイルを設定してください。


例にあるCSSでは「vh」という単位を使用しています。これは、ブラウザの表示領域に対する比率を示しており、ブラウザを拡大・縮小するたびにサイズが自動調整されます。


「width:100%」…ブラウザの表示領域いっぱいに横幅を広げます。
「height:80vh」…横幅の80%のサイズで高さが調整されます。


HTMLでPDFを表示する


◎スタイルを指定するには?


スタイルを指定するには、以下のような方法があります。


  • 方法1)CSSファイルを別に作成(拡張子=.css)してスタイルを記述し、HTMLファイルでCSSを読み込んで利用する
  • 方法2)HTMLファイルに<style>タグを作ってスタイルを記述する
  • 方法3)HTMLタグの中にそのまま「style=…」の形式で記述する

●embedを使う


<embed>はENBEDdingの略で、動画・音声などマルチメディアの埋め込みに使用されます。

プラグインがインストールされていない場合には再生できないことがありますので、注意が必要です。


HTMLでPDFを表示する


◇属性の説明

[src]:再生するファイルのURLを指定します。
[type]:再生するファイルのMIMEタイプを指定します。PDFの場合は「application/pdf」です。


なお、終了タグを記述するとHTML構文エラーになりますので、記述は不要です。


HTMLでPDFを表示する


●objectを使う


<object>はマルチメディアなどを貼り付けるための汎用的なタグです。


HTMLでPDFを表示する


以前は、Flash動画の埋め込みに利用されることが多かったのですが、現在はFlash動画自体が非推奨のためあまり使用されることはなくなりました。

画像の埋め込みには<img>、マルチメディアには<iframe>などの使用が推奨されていますのでうまく使い分けましょう。


HTMLでPDFを表示する


●PDF.jsを使う


PDF.jsは、JavaScriptで作成されたPDFビューアです。

JavaScriptで読み込んでCanvasで描画されているため、iPhoneやAndroidなどのスマートフォンでも表示できるという利点があります。

◇PDF.jsの配置

以下のサイトから最新版をダウンロードします。

https://mozilla.github.io/pdf.js/getting_started/#download

ダウンロードした「pdfjs-2.14.305-dist.zip」を解凍してサーバ上に配置します。

※アドレスバーに「 file:/// 」と表示されている場合はローカルファイルです。ローカルではエラーになるため、必ずサーバ上に配置してください。


HTMLでPDFを表示する


◇記述例

PDFファイルの指定は、相対パス・絶対パス・絶対URLともに有効です。


HTMLでPDFを表示する



Part2:HTMLページを印刷してPDFに保存する方法

●HTMLページをPDFに保存する


例)ChromeでHTMLページを印刷してPDFに保存するには


    • 1.Chromeで対象のサイトを開きます。
    • 2.ブラウザ右上の3点リーダーをクリックし、[印刷...] を選択します。
    • 3.[印刷] 画面右側の [送信先] で「PDFに保存」を選択します。

PDFelementがインストール済の場合には「Wondershare PDFelement」を選択してもPDFに保存できます。

  • 4.[保存] ボタンをクリックし、任意の場所にPDFを保存します。ページ全体がPDFとして保存されます。


HTMLでPDFを表示する


◎ヘッダー・フッターを印刷したくない場合には、[オプション] の [ヘッダーとフッター] のチェックをはずします。

●HTML内のPDFを保存・印刷する


PDFだけを個別に保存・印刷したい場合に便利な方法です。


1.対象のPDF上で右クリックし、[名前を付けて保存...] を選択します。

2.任意の場所にPDFを保存します。


[印刷] する場合は、[印刷] 画面の [送信先] で接続済みのプリンターを選択すれば、そのまま印刷することもできます。


HTMLでPDFを表示する



まとめ

PDFファイルであれば、デバイスなどに依存することなくファイルを閲覧・編集できます。

このメリットを生かせば、サイト上で表示するファイル形式をPDFにすることでファイルの共有もスムーズになりますね。ぜひ積極的に活用してみてください。

PDF編集はこれ1本でOK | PDFelement

スマートに、シンプルに、AI 搭載 PDF ソリューション

・ 第19回、24回、29回Vectorプロレジ部門賞受賞

・ 標準版からプロ版まで、幅広いのニーズに対応

・ Windows、Mac、iOS、Android、クラウドに対応

・ 7x12h体制アフターサービス

役に立ちましたか?コメントしましょう!

登録 / ログイン してからコメントを書いてください
user
{{item.name || userName}}
{{item.time}}
{{item.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください
user
{{item1.type == 2 ? authName : item1.name ? item1.name : userName}}
{{item1.time}}
@{{item1.reply_to_type == 2 ? authName : item1.reply_to_name ? item1.reply_to_name : userName}} {{item1.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください

作成日: 2022-06-27 17:23:46 / 更新日: 2023-05-22 11:39:39

avatar

PDFエレメント

編集者

お問い合わせ

この文書または製品に関するご不明/ご意見がありましたら、 サポートセンター よりご連絡ください。ご指摘をお待ちしております!

All In OneのPDFソフト
ワンランク上のPDF編集体験を。