スマホでもPDFをiframeで表示するPDF.js

iframeでPDFをそのまま表示しようとすると、パソコンではちゃんと表示されますが、スマホでは表示されなかったり（Android）、1ページ目しか表示されなかったり（iphone）します。
そんな時は「PDF.js」を使えば、スマホでも表示できるようになります。

PDF.jsのダウンロード

ダウンロード＞解凍し、Cakephpであれば、webrootに適当なフォルダ（例えばpdfjs）を作って、中身をそのまま入れます。
webフォルダのviewer.htmlにアクセスすると何かPDFが表示されます。
https://it-life.co.jp/pdfjs/web/viewer.html?file=https://it-life.co.jp/file.pdf　の様に?file=の後にPDFのURLを入れるとそのPDFが表示されます。
iframeで表示するならばsrcに上記URLを入れるだけです。
<iframe src="https://it-life.co.jp/pdfjs/web/viewer.html?file=https://it-life.co.jp/file.pdf"></iframe>

とっても簡単ですね！

参考：https://www.nedia.ne.jp/blog/2019/04/23/14048

カテゴリ：WEB全般 投稿日時：2020年4月9日 15:37

---

コメント

コメントはまだありません。

コメント投稿

ご自由にコメントください！
※一度投稿すると削除できませんのでご注意ください。管理者の独断と偏見で削除する場合があります。コメント機能は予告なく停止する場合があります。

ニックネーム

コメント