PDF.js Previous/Next example

by Craig Martin

HTML

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<div id="pdf-container-1">
  <button class="pprev">Previous</button>
  <button class="pnext">Next</button>
  &nbsp; &nbsp;
  <span>Page: <span class="page_num"></span> / <span class="page_count"></span></span>
  &nbsp; &nbsp;
  <button class="zoom">Zoom In</button>
  <button class="zoomout">Zoom Out</button>
<canvas class="the-canvas" style="direction: ltr;pointer-events: none;"></canvas>
</div>

<div id="pdf-container-2">
  <button class="pprev">Previous</button>
  <button class="pnext">Next</button>
  &nbsp; &nbsp;
  <span>Page: <span class="page_num"></span> / <span class="page_count"></span></span>
  &nbsp; &nbsp;
  <button class="zoom">Zoom In</button>
  <button class="zoomout">Zoom Out</button>
<canvas class="the-canvas" style="direction: ltr;pointer-events: none;"></canvas>
</div>

JavaScript

function initPDFViewer(containerId, pdfUrl) {
  var pdfjsLib = window['pdfjs-dist/build/pdf'];
  pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

  var pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      scale = 0.9,
      container = document.getElementById(containerId),
      canvas = container.querySelector('.the-canvas'),
      ctx = canvas.getContext('2d'),
      page_num = container.querySelector('.page_num'),
      page_count = container.querySelector('.page_count');

  function renderPage(num, zoom) {
    pageRendering = true;
    pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport({scale: zoom});
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);

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

    page_num.textContent = num;
  }

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

  function onPrevPage() {
    if (pageNum <= 1) {
      return;
    }
    pageNum--;
    queueRenderPage(pageNum, scale);
  }

  function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
      return;
    }
    pageNum++;
    queueRenderPage(pageNum, scale);
  }

  function onZoom() {
    scale += 0.3;
    queueRenderPage(pageNum, scale);
  }

  function onZoomout() {
    scale -= 0.3;
    if (scale < 0.5) {
      scale = 0.5;
    }
    queueRenderPage(pageNum, scale);
  }

  container.querySelector('.pprev').addEventListener('click', onPrevPage);
  container.querySelector('.pnext').addEventListener('click',...