PDF.jsを使ったサンプルの作成と確認

github

github.com

PDF.js

FireFoxではデフォルトで使用されているjsライブラリ。
ライブラリの中でpdfデータを変換してcanvasで表示してくれる。
デフォルトの設定では、最初にPDF情報を取得して、その後は1ページ単位にリクエストを投げてデータを取得している。
PDFで使用されるフォントも必要なタイミングで動的に取得して使用している。
HTTPステータスコードは200と206以外をエラーとしてハンドリングしている。
FireFox以外のブラウザを使用する場合には、compatibility.jsをインクルードする。

確認内容

1ページ単位にデータを取得している部分を1リクエストにできるか確認。
- disableRangeプロパティに、trueを設定することで可能。
- git clone したルート・ディレクトリで、gulp webserverして、 range_off_check.htmlとrange_on_check.htmlをそれぞれ開発者ツールのネットワークで確認。
フォントファイルの読込タイミングと設定値の確認
- cMapUrlプロパティにcmapsのディレクトリを指定する。
  - cmapsは、pdf.jsをgit cloneしてきて、node make genericをして生成されたものを使用。
- cMapPackedプロパティに、trueを指定する。
- font_file_check.htmlを開いた時には、range_on_check.htmlでは読み込まれていない、bcmapファイルがloadされることを、開発者ツールのネットワークで確認。
HTTPサーバによって、リクエストの投げ方が変わることを確認
- git clone したルート・ディレクトリで、gulp webserverした場合とnode mockServer.jsした場合とで、range_on_check.htmlにアクセスした時の動きが異なることをネットワークで確認。
エラーハンドリング
- node.jsでレスポンスを返しているところで、200としている部分を404や500などにしてサーバ再起動。
- PDFJS.getDocument(url) にエラー時の関数を指定することで、エラーオブジェクトを取得することが可能。
- 取得したエラーオブジェクトからHTTPステータスコードを取得してハンドリングするような実装にする。