HTMLでPDFを表示する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでPDFを表示する方法について、3パターンに分け、簡単に解説していきます。

embedタグで表示

embedタグではプラグインを必要とするデータを埋め込めます。

embedタグのsrc属性にデータのURLを指定するとそのデータを表示できます。

<embed src="hoge.pdf" type="application/pdf" width="400" height="300">

上記のコードでは、hoge.pdfというPDFファイルを、データとして幅400ピクセル、高さ300ピクセルで表示しています。

iframeタグで表示

iframeタグではフレームを作り、その中に別ページを表示できます。

iframeタグのsrc属性にURLを指定することで、データを含め表示させることが可能です。

<iframe src="hoge.pdf" width="400" height="300"></iframe>

上記のコードでは、hoge.pdfというPDFファイルを、別ページとして幅400ピクセル、高さ300ピクセルで表示しています。

objectタグでデータ表示

objectタグではプラグインデータのみならず、全ての外部リソースを埋め込めます。

objectタグのdata属性にデータのURLを指定することでそのデータを表示させることができます。

<object data="hoge.pdf" type="application/pdf" width="400" height="300"></object>

上記のコードでは、hoge.pdfというPDFファイルを、外部リソースとして幅400ピクセル、高さ300ピクセルで表示しています。