Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

今だと、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 さん

katzueno
concrete5 Japan コミュニティリーダー。コンクリートファイブジャパン株式会社の CCO。YokosoNews で日本を英語で世界に発信。元々はロスでインディー映画制作やエンタメ雑誌の編集。
http://katzueno.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした