PDF.js Previous/Next example

by fizerkhan

HTML

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

<h1>PDF.js Previous/Next example</h1>

<div>
  <button id="prev">Previous</button>
  <button id="next">Next</button>
    <button id="draw">Draw me</button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<div id="canvas-parent">
   <canvas id="the-canvas"></canvas>
</div>

CSS

#the-canvas {
  border: 1px solid black;
  direction: ltr;
}

#canvas-parent {
  position: relative;
}

JavaScript

// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = true,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

var thePdf = null;
var scale = 1;

pdfjsLib.getDocument(url).promise.then(function(pdf) {
  thePdf = pdf;
  viewer = document.getElementById('canvas-parent');

  for(page = 1; page <= pdf.numPages; page++) {
    canvas = document.createElement("canvas");    
    canvas.className = 'pdf-page-canvas';         
    viewer.appendChild(canvas);            
    renderPage(page, canvas);
  }
});

function renderPage(pageNumber, canvas) {
  thePdf.getPage(pageNumber).then(function(page) {
    viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;          
    page.render({canvasContext: canvas.getContext('2d'), viewport: viewport});
  });
}

/**
 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

/**
 * Displays previous page.
 */
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * Displays next page.
 */
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
 ...