PDF を HTML に埋め込む

1. embed タグを使用して PDF を HTML に埋め込む
2. iframe タグを使用して PDF を HTML に埋め込む
3. オブジェクトタグを使用して PDF を HTML に埋め込む

このチュートリアルでは、PDF を HTML に埋め込む方法を紹介します。

embed タグを使用して PDF を HTML に埋め込む

HTML は、Web ページに外部リソースを埋め込むための embed タグを提供します。embed タグを使用して、PDF、メディアプレーヤー、Web ページなどの外部リソースを埋め込むことができます。タグには src 属性があり、埋め込まれるファイルのパスを指定できます。埋め込みファイルのタイプは、type 属性で指定できます。PDF の場合、type 属性は application/pdf である必要があります。embed タグは自動終了タグです。

たとえば、HTML ファイルが配置されているディレクトリに files という名前のファイルを作成します。files ファイル内には、PDF husky.pdf があります。HTML では、embed タグを記述し、src 属性にパス files/husky.pdf を指定します。次に、type 属性を application/pdf に設定します。PDF の幅と高さを 100%にします。

以下の例では、Web ページに husky.pdf PDF が生成されます。高さと幅が 100%に設定されているため、PDF はビューポートをカバーします。

embed タグは、最近のすべてのブラウザでサポートされているわけではありません。Android Chrome ブラウザーは、PDF の埋め込みをサポートしていません。このような場合、Google ドライブ PDF ビューアを使用できます。type 属性を削除し、PDF の Google ドライブ URL を設定する必要があります。このようにして、PDF を HTML に埋め込むことができます。

サンプルコード：

<embed src="files/husky.pdf" type="application/pdf" width="100%" height="100%" />

iframe タグを使用して PDF を HTML に埋め込む

iframe HTML タグを使用すると、他のドキュメントを HTML ファイルに埋め込むことができます。これを使用して、PDF を HTML に埋め込むことができます。PDF ファイルのパスは src 属性で指定できます。タグ内で PDF の高さと幅を設定できます。

たとえば、iframe タグを記述し、src 属性を files/husky.jpg に設定します。Husky.jpg は、files ディレクトリにある埋め込み PDF ファイルです。HTML ファイルと files ディレクトリは同じディレクトリにあります。PDF の高さと幅を 100%に設定します。PDF はビューポートをカバーします。iframe タグを使用すると、PDF に垂直スクロールバーが表示されます。このようにして、iframe タグを使用して PDF ファイルを HTML に埋め込むことができます。

サンプルコード：

<iframe src="files/husky.pdf" height="100%" width="100%"></iframe>

オブジェクトタグを使用して PDF を HTML に埋め込む

object タグを使用して PDF を HTML に埋め込むこともできます。object タグは、外部リソースが使用するコンテナを設定します。外部リソースには、PDF、メディア、Web ページなどがあります。ファイルのパスは data 属性で設定できます。同様に、上記の方法と同様に、タグ自体からコンテナの高さと幅を設定できます。したがって、object タグを使用して PDF を HTML に埋め込むことができます。

サンプルコード：

<object data="files/husky.pdf" height="100%" width="100%"></object>