PDF.jsを使ってみる - Taste of Tech Topics

こんにちは、ishida(@kojiisd)です。

今回はPDFを全てjavascriptで表示、操作するプロダクト「PDF.js」を使ってみます。
PDF.jsはHTML5でレンダリングするプラグイン不要のスクリプトになっています。
つまり、PDF.jsを使えばAdobeなどのプラグインを使わずにPDFが利用できるようになるのです。

概要の説明はITMediaがわかりやすいですね。

PDF.jsの入手

まずはPDF.jsを手に入れましょう。githubから入手が可能です。
ちなみにpdf.js自体はgithubにもおいてありません。曰く、自分でmakeしろ、とのこと。
それでもサンプルで置かれているhelloworldのindex.htmlに記述されている通り、
各種jsを読み込めば実施可能です。

PDFを使ったページを作成する

いよいよ、このpdf.jsを利用してWebページ上でPDFファイルを表示してみます。
helloworldのサンプルを解剖して、今回は最低限必要な項目を紹介します。

PDFJS.getDocument('compressed.tracemonkey-pldi-09.pdf').then(function(pdf) {
  pdf.getPage(1).then(function(page) {            // ページ番号を指定します。ここは1ページのみを指定しています。
    var scale = 1;                                // 倍率を指定します。
    var viewport = page.getViewport(scale);

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {                         // 描画条件をセットします。
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);                   // 描画を行います。
  });
});

サンプルやデモを見るともっといろいろと設定やらされていますが、
本当に必要な最低限の指定はこれくらいみたいですね。
　・ページ番号を指定する。（サンプルでは1ページ目を指定しています。）
　・スケール（PDF表示時の倍率）を指定する。
　・指定した領域（canvas）のコンテキスト（2DContext、幅、高さ）を指定する。
これだけです。この指定で以下のような画面が表示されます。

ただし、表示をさせただけなので、文字の選択やその他の操作は一切できません。
Viewer.htmlなどのデモでは文字選択など出来ているので、
この辺もjavascriptを記述する必要があるのかもしれませんね。

まだまだ安定していない模様

ちなみにこのPDF.js、私のローカル環境では動かないことが何度もありました。
デバッグしてみると同じ個所を通る際に、エラーが発生する場合と
うまく行く場合があるようです。（Javascriptには考えにくいが、タイミング問題？）

いずれにしても、まだまだ開発中のようですし、
pdfの読み込み速度の改善と同時に、この辺も安定することを
期待しています。

では。