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にアクセス

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

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

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

こんな感じです。

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

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

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

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

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