スマホでも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.4.0 以上のクッキーの読み書き

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

CanonのカメラをWEBカメラにする

CanonのカメラをWEBカメラにする方法

EclipseでctpファイルをPHPとして認識させる

EclipseでctpファイルをPHPとして認識させる

eclipseのプロジェクト・エクスプローラーがフルパスになって見にくい

eclipseのプロジェクト・エクスプローラーがフルパスになって見にくい

Cakephp3 POST値を設定

Cakephp3 POST値を設定