[pdf.js] テキスト選択出来るスライド表示ライブラリを書いた

pdf.js-controllerというライブラリを書きました。

名前の通りmozilla/pdf.jsを扱うものです。 PDFをスライドのようなページめくりをするものを作るときに簡単に作れるようにする目的で作成しています。

実際に以下のスライドはこのライブラリを使って動作しています。

https://azu.github.io//slide/2015/year-end/pdf.js.html

使い方

npm install pdf.js-controller

インストールして、以下のように書くだけでとりあえずpdfを表示できます。普通にpdf.jsを扱うと文字列の選択ができない、日本語が文字化けする、リンクがクリック出来ないなどハマりどころがたくさんあります。

このライブラリではpdfjs-distのディレクトリをpdfDistDirで指定する以外はあまり意識しなくても自動的にやってくれます。 (pdfjs-distはdependenciesとして入ってるので自動的に入ります)

// container element
var container = document.getElementById("pdf-container");

var PDFController = require("pdf.js-controller");
var controller = new PDFController({
    container: container,
    // path to dir of pdfjs-dist
    pdfDistDir: __dirname + "/node_modules/pdfjs-dist/"
});
// path to URL of pdf.
// Apply CORS to this path. It means that the URL should be same origin.
var PDFURL = "./example.pdf";
controller.loadDocument(PDFURL)
    .then(initializedEvent)
    .catch(function (error) {
    console.error(error);
});

container.addEventListener(PDFController.Events.before_pdf_rendering, function (event) {
    // before render
});
container.addEventListener(PDFController.Events.after_pdf_rendering, function (event) {
     // after render
});

function initializedEvent() {
    window.addEventListener("resize", function (event) {
        controller.fitItSize();
    });
    document.onkeydown = function (event) {
        var kc = event.keyCode;
        if (event.shiftKey || event.ctrlKey || event.metaKey) {
            return;
        }
        if (kc === 37 || kc === 40 || kc === 75 || kc === 65) {
            // left, down, K, A
            event.preventDefault();
            controller.prevPage();
        } else if (kc === 38 || kc === 39 || kc === 74 || kc === 83) {
            // up, right, J, S
            event.preventDefault();
            controller.nextPage();
        }

    };
}