Edited at

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 さん