スマホでも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


コメント

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

コメント投稿

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

ニックネーム

コメント

カテゴリ

新着備忘録

CakePHP3のタイムゾーン設定

CakePHP3のタイムゾーン設定方法です。

Thunderbirdで同じメールが何度も届く件

Thunderbirdで同じメールが何度も届く件についてです。

CakePHP3でCSV出力

CakePHP3でCSV出力する方法です。

CSVファイルからデータを取り込むときに文字化け解決方法

CSVファイルからデータを取り込むときに文字化け解決方法です。

CakePHP3.4.0 以上のクッキーの読み書き

CakePHP3.4.0 以上のクッキーの読み書き