C:blanc
投稿日
2022年06月08日
Blog JavaScript

PDFをダウンロードせずに、スマホのブラウザで表示する

  • シェアする
  • このエントリーをはてなブックマークに追加

Contents

  1. はじめに
  2. PDF.jsをダウンロード
  3. 使い方
  4. 日本語化
  5. PDFファイルを指定して表示する
  6. 完成品
  7. 終わりに

はじめに

スマホでPDFファイルを開いた時、一旦端末にダウンロードされてしまいます。
PDFファイルをダウンロードせずに、スマホのブラウザーで表示するには、Javascriptのライブラリー PDF.js を使います。
PDF.js

PDF.jsをダウンロード

最新版は古いブラウザに対応しなくなったので、下記より v2.4.456 をダウンロードします。
https://github.com/mozilla/pdf.js/releases/tag/v2.4.456
ページ下部のAssetsの pdfjs-2.4.456-es5-dist.zip です。

また、最新版はカスタマイズがやりずらかったのと、一部のPDFファイルで検索機能が使えなかったこともありました。（これはPDFファイル側の問題かもしれませんが・・・）

あと、なんと、最新版（v2.14.305）はピンチが使えませんでした。
https://mozilla.github.io/pdf.js/web/viewer.html

使い方

直では表示できないので、macのSitesに移動しました。
（dockerやサーバーにアップしても同じだと思います）
http://localhost/pdfjs-2.4.456-es5-dist/web/viewer.html
表示されました。意外と簡単ですね。
web/viewer.js
defaultUrl: {
    value: "compressed.tracemonkey-pldi-09.pdf",
    kind: OptionKind.VIEWER
},
viewer.js 4550行でPDFファイルを指定しています。

日本語化

日本語化はhtmlタグに lang="ja" を追加するだけです。
web/viewer.html
<html lang="ja" dir="ltr" mozdisallowselectionprint>

PDFファイルを指定して表示する

viewer.jsの4550行のPDFファイル名「compressed.tracemonkey-pldi-09.pdf」を削除します。

viewer.htmlの<script src="viewer.js"></script>の下に、下記のJavascriptコードを追加します。
PDFファイルは、pdfディレクトリを作ってそこに入れることにします。
web/viewer.js
defaultUrl: {
  value: "",
  kind: OptionKind.VIEWER
},
web/viewer.html
<script src="viewer.js"></script>

<script>
window.addEventListener('load', function() {
  PDFViewerApplication.open('../pdf/1.pdf');
  PDFViewerApplication.setTitle('タイトル');
}, false);
</script>
viewer.htmlをPHP化して、下記のように書き換えれば、クエリーなどのパラメータによって、PDFファイルを差し替えることができます。
PDFViewerApplication.open('<?= $file >');
PDFViewerApplication.setTitle('<?= $title >');

完成品

https://blog.c-blanc.com/demo/blog/2/web/viewer.html
（PDFはマイナちゃんのカレンダーを使わせていただきました。）

cmapsフォルダはなくても動きました。（特に検証はしていません）
localeディレクトリ内も使うのは locale.properties と jaフォルダだけです。

終わりに

本番で使う場合、viewer.htmlを一つ上の階層に上げたくなります。（私だけ？）
その場合は、viewer.htmlとviewer.js内のパスを書き換えるだけです。

Androidの場合、Firefoxが必要かも 🤔

PROFILE

C:blanc
フリーランスのプログラマーです。

  • COMMENT

    送信しました！ コメントは承認後表示されます！
  • あと150文字