みかづきブログ その3

3ヶ月つづけてみました。

pdf.jsをつかってPDFの内容をcanvasにレンダリングする

github.com

すごいライブラリですね。さすがMozilla。


つかいかた

1. ライブラリをダウンロードして解凍

https://mozilla.github.io/pdf.js/getting_started/#download からライブラリをダウンロード

2. ソースを編集

viewer.htmlにアクセスした際、デフォルトではcompressed.tracemonkey-pldi-09.pdfを開くようになっているのですが、
web/viewr.js の28行目を編集することでデフォルトで開くPDFを変更できます。

3. サーバにアップ

buildフォルダもwebフォルダもまとめてアップしましょう。

4. viewer.htmlにアクセス

f:id:kimizuka:20160907102004p:plain

http://kimizuka.github.io/pdfjs/web/viewer.html

PDFの内容がレンダリングされています。
ちなみにPDFに直アクセスすると、

f:id:kimizuka:20160907102013p:plain

http://kimizuka.github.io/pdfjs/web/illust.pdf

こんな感じです。

引数で開くPDFを指定することもできます。

http://kimizuka.github.io/pdfjs/web/viewer.html?file=illust.pdf

が。同一ドメイン上にあるPDFを指定しないとエラーになるようです。

iPhoneでしか確認していませんが、スマートフォンでも問題なく観覧できました。

f:id:kimizuka:20160907102028p:plain

すごいですね。さすがMozilla。