PDF.jsを利用してPDFをブラウザ表示する

主題のとおりです。PDF.jsというライブラリを利用してみたので共有します。

 

せっかくなので、Pythonでサーバーを挙げて確認しようと思います。

前に説明したFlaskを利用しますよ(^^)/

 

kenteiblog.hatenablog.com

 

1. PDF.jsを手に入れる

まずはライブラリをゲットします。以下に接続。

https://mozilla.github.io/pdf.js/getting_started/#download

 

ページに移動すると安定板とベータ版を選択できますが、今回は安定板(2017/12/8時点でv1.9.426)をダウンロードします。

 

取得したZIPを展開すると以下のような構成になっています。

├── LICENSE
├── build/
│   ├── pdf.js
│   ├── pdf.js.map
│   ├── pdf.worker.js
│   └── pdf.worker.js.map
└── web/
   ├── cmaps/
   ├── compressed.tracemonkey-pldi-09.pdf
   ├── debugger.js
   ├── images/
   ├── l10n.js
   ├── locale/
   ├── viewer.css
   ├── viewer.html
   └── viewer.js

 とりあえず今回はbuildフォルダ以下の4ファイルが必要です。

 

2. Pythonサーバ準備

まずはソースから

PDF.jsサンプル Pythonサーバー 

 

pyファイルは基本的に前に紹介したときの記事から変わってません。
ただ単にindex.htmlをテンプレートして呼び出すだけ。

 

前には説明していないことですが、flaskでは静的なファイル(今回でいうとライブラリとか)は、staticフォルダに置くというルールになっています。

なので、1で取得した4ファイルはstaticフォルダに配置します。

 

まとめると以下のような構成になります。

├── static/

│        ├── libs

│   │     ├── pdf.js
│   │     ├── pdf.js.map
│      │     ├── pdf.worker.js
│   │  └── pdf.worker.js.map

│   └── test.pdf
├── templates/
│   └── index.html
└──server.py

 

3. 動作

pyを実行すると、サーバーがあがります。あとは http://127.0.0.1:5000 に接続するだけです。

 

test.pdfの内容が画面中央に表示されるはずです。

単純なソースではありますが、prevボタンやnextボタンを押すことでページを移動することができます。

 

4. 終わりに

結構簡単にできますね。
私は時々「なろう」で縦書き小説を読むのですが、あれも一回PDFに吐いてブラウザに表示してますよね。(あちらはURLが.pdfになっているので少し話は違う気もしますが)

色々と応用例がありそうなので、もう少し深堀してもいいかもしれません(^^♪

 

以上です。

2017/12/8 賢帝俊来