スマホでも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のページネーションの関連モデルでの並び替え方法です。

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

PDF.jsで、スマホでもPDFをiframeで表示することができます。

PHPからslack APIでチャンネルにメッセージを送信する

PHPからslack APIでチャンネルにメッセージを送信する方法です。

CakePHP3にUpload Pluginをインストール

CakePHP3にUpload Pluginをインストールする方法です。

要素の背景にbackground-size:coverみたいに動画を配置する

要素の背景にbackground-size:coverみたいに動画を配置する方法です。