HTMLタグだけで PDF を埋め込み表示する方法

今だと、PDF ファイルのページ中の表示を、何も特殊な JS ライブラリを使わずに、HTML だけで埋め込めることが出来るようになったそうです。

ただし iOS の Safari だけ、iOS 10 まで確認しているのですが、うまく表示されないようです。

参考
https://pdfobject.com/static.html

object を使う方法

<object data="pdf.pdf#page=2" type="application/pdf" width="100%" height="100%">
   <p><b>表示されない時の表示</b>: <a href="pdf.pdf">PDF をダウンロード</a>.</p>
</object>

concrete5 CMS

concrete5 CMS でも無料アドオンがあります。

PDF Viewer
https://www.concrete5.org/marketplace/addons/pdf-viewer1

こちらも object を使ってシンプルに PDF を埋め込み表示してくれるアドオンです。

embed を使う方法

<embed src="pdf.pdf#page=2" type="application/pdf" width="100%" height="100%">

iframe を使う方法

<iframe src="pdf.pdf#page=2" width="100%" height="100%">
   <p><b>表示されない時の表示</b>: <a href="pdf.pdf">PDF をダウンロード</a>.</p>
</iframe>

object の中に iframe をいれて、できるだけたくさんのユーザーに対応

<object data="pdf.pdf#page=2" type="application/pdf" width="100%" height="100%">
    <iframe src="pdf.pdf#page=2" width="100%" height="100%">
    <p><b>表示されない時の表示</b>: <a href="pdf.pdf">PDF をダウンロード</a>.</p>
    </iframe>
</object>

PDF.js を利用する

iOS などでもどうしても表示させたい場合は、PDF.jsというものがあるそうです。

情報提供: @heresist さん