ウェブサイトにPDFファイルを埋め込む方法

ウェブサイトにPDFファイルを埋め込む方法を知りたい方必見。HTMLのembedやobjectタグの使い方、JavaScriptライブラリであるPDF.jsを使えばブラウザでPDFを直接表示でき、プラグインのインストールも不要。PDFファイルを埋め込む際の注意点も紹介します。

2023/3/14（更新: 2026/3/26）

PDF→HTML変換BuildVuPDFHTML変換

ウェブサイトにPDFファイルを埋め込む方法を解説します。HTMLのembedやobjectタグの使い方から、PDFファイルを埋め込む際の注意点、そしてより良い代替手段を紹介します。

HTMLサンプルコード

embedタグを使用する例

<embed src="doc.pdf" type="application/pdf" width="400px" height="400px">
    <noembed>
        <p>
            Your browser does not support PDF files.
            Download the file instead
        </p>
    </noembed>
</embed>

objectタグを使用する例

<object data="doc.pdf" type="application/pdf" width="400px" height="400px">
    <p>
        Your browser does not support PDF files.
        Download the file instead
    </p>
</object>

なぜ3つのタグがあるのですか？

この構造は、JavaアプレットやAdobe Flashの時代までさかのぼります。当時、<iframe>は他のHTMLページのためのもので、<object>タグはレンダリングを引き継ぐためのシステムアプリケーション用でした。現代ではセキュリティ上の理由からブラウザがこうしたプラグインを許可しなくなっています。

<embed>タグは、HTML5規格に採用されるまでは非標準でした。詳細はMDNの「From object to iframe -- other embedding technologies」を参照してください。

すべてのブラウザがPDFの埋め込みに対応しているのですか？

デスクトップ用ブラウザのサポートは充実しています。モバイルについては、Android版Chromeが2025年にネイティブPDFビューアを搭載し、アプリ内でPDFを直接表示できるようになりました（Android 12以上が必要）。ただし、古いバージョンのブラウザや一部のモバイルブラウザでは依然としてPDFの表示に制限がある場合があります。

インナータグとは何ですか？

インナータグは、提供されたソースファイルやファイルタイプの処理方法がわからない場合、ブラウザにレンダリング内容を伝えるものです。

公式には、<noembed>タグは仕様の一部ではありません。実際、<embed>タグはフォールバックコンテンツに全く対応していない唯一のタグです。現実には、ブラウザがフォールバックコンテンツを無視することがあります。PDFの表示に対応していないブラウザでは、<embed>タグと<iframe>タグに対して独自のフォールバックコンテンツが表示される場合があります。