JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

PDFファイルをHTML5ページに埋め込む方法｜iframe・embed・objectの使い方

PDFファイルをHTML5ページに埋め込む基本の方法

HTML5ページにPDFファイルを表示したい場合は、<iframe>（インラインフレーム）要素を使うのが最も手軽で一般的な方法です。<iframe>のsrc属性にPDFファイルのURLまたはパスを指定するだけで、ブラウザ内にPDFビューアが表示され、ページを離れることなくドキュメントを閲覧できます。

<iframe>を使用したサンプルコード

<!DOCTYPE html>
<html>
    <head>
        <title>HTML iframe Tag</title>
    </head>
    <body>
        <h1>HTML5 Tutorial</h1>
        <iframe src="https://www.tutorialspoint.com/html5/html5_tutorial.pdf" style="width:500px; height:300px;"></iframe>
    </body>
</html>

コードのポイント

  • src属性：表示したいPDFファイルのURLや相対パスを指定します。
  • width / height：iframeの表示サイズを指定します。style属性のほか、width属性・height属性でも設定できます。
  • フォールバック：<iframe>タグ内にテキストを記述すると、PDFを表示できない環境向けの代替コンテンツとして機能します。

その他の埋め込み方法：<embed>と<object>

<iframe>以外にも、HTML5では<embed>要素や<object>要素を使ってPDFを埋め込むことが可能です。

<!-- embed要素の場合 -->
<embed src="sample.pdf" type="application/pdf" width="500" height="300">

<!-- object要素の場合 -->
<object data="sample.pdf" type="application/pdf" width="500" height="300">
    <p>お使いのブラウザではPDFを表示できません。
    <a href="sample.pdf">こちらからダウンロードしてください</a>。</p>
</object>

特に<object>要素は、タグ内に代替コンテンツを記述できるため、古いブラウザやPDF非対応環境への配慮が必要な場合に便利です。

埋め込む際の注意点

  • PDFビューアの見た目や操作パネルは、利用者のブラウザやOSによって異なる場合があります。
  • モバイル端末ではPDFがインライン表示されず、そのままダウンロードされることもあります。重要な情報は通常のHTMLコンテンツとしても提供することをおすすめします。
  • 外部サイトのPDFを読み込む場合は、相手側サーバーのCORS設定やセキュリティポリシーによって表示がブロックされる可能性がある点にも注意しましょう。
  1. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. JavaScriptでパラメータのオブジェクトを関数に渡すエレガントな方法とは？

    JavaScriptでは、複数の値を個別の引数として渡す代わりに、1つのオブジェクトにまとめて関数へ渡すことができます。さらに分割代入（destructuring）を組み合わせれば、コードをより簡潔で読みやすくできます。基本的な考え方関数の仮引数を { a, b, c, d } のように波括弧で定義すると、渡されたオブジェクトから対応するプロパティが自動的に取り出されます。これにより、引数の順序を気にせず、名前ベースで明確に値を渡せるのが大きなメリットです。サンプルコード以下は、4つのプロパティを持つオブジェクトを関数に渡し、その合計値を表示する例です。<!DOCTYPE html>