Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
101
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

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
101
Help us understand the problem. What are the problem?