LoginSignup
11
16

More than 5 years have passed since last update.

PDF.jsを使って、pdfファイルを出力する

Posted at

コミックサイト作成した時に使用しました。

pdfファイルのページ数に対して、canvasを生成し
pdfファイルをレンダリングしています。
以下がコードになります。

(function(){
  var url = 'file.pdf';

  PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

  var pdfDoc = null;
  var pageNum = 1;
  var pageRendering = false;
  var pageNumPending = null;
  var scale = 1;
  var numi;
  var n;
  var ctx;
  var viewport;
  var canvas0;
  var renderContext;
  var renderTask;
  var pdfDoc;
  var createdom = document.getElementById("canvas");

  PDFJS.getDocument(url).then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    renderPage(pageNum);
  });

  function renderPage(num) {
    pageRendering = true;
    fragment = document.createDocumentFragment();

    for(var i = 1; i < pdfDoc.numPages + 1; i++){
        cv = document.createElement("canvas");
        cv.setAttribute("id","canvas" + i);
        fragment.appendChild(cv);

      pdfDoc.getPage(i).then(function(page) {
          numi = i++;
          n = numi-3;
          canvas0 = document.getElementById("canvas" + n);
          ctx = canvas0.getContext('2d');
          viewport = page.getViewport(scale);
          canvas0.height = viewport.height;
          canvas0.width = viewport.width;

          renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };

          renderTask = page.render(renderContext);

          renderTask.promise.then(function() {
            pageRendering = false;
            if (pageNumPending !== null) {
              renderPage(pageNumPending);
              pageNumPending = null;
            }
          });
          return;
        });

    }
      createdom.appendChild(fragment);

    document.getElementById('page_num').textContent = pageNum;
  }

  function queueRenderPage(num) {
    if (pageRendering) {
      pageNumPending = num;
    } else {
      renderPage(num);
    }
  }

  function onPrevPage() {
    if (pageNum <= 1) {
      return;
    }
    pageNum - 2;
    queueRenderPage(pageNum);
  }
  document.getElementById('prev').addEventListener('click', onPrevPage);

  function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
      return;
    }
    pageNum + 2;
    queueRenderPage(pageNum);
  }
  document.getElementById('next').addEventListener('click', onNextPage);


})();

少し、力技になってしまっている箇所がありますが、実装できました。

11
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
16