PDF - No next

no next prev only zoom with all pages rendered

by Neeraj Sonar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<h1>Simple PDF.js with zoom</h1>
<button id="zoominbutton" type="button">zoom in</button>
<button id="zoomoutbutton" type="button">zoom out</button>
<br>
<div id="canvas-container">


</div>
<!-- v 1 ----->

CSS

.canvas-container {
  height: 300px;
  width: 95%;
  padding: 10px;
  background: white;
  overflow: auto;
}

JavaScript

var pageNum = 1;
var pdfScale = 0.5; // make pdfScale a global variable
var shownPdf; // another global we'll use for the buttons
// PDF to load: change this to a file that exists;
var url = 'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf'
var currPage = 1; //Pages are 1-based not 0-based
var numPages = 0;
var thePDF = null;
 
PDFJS.getDocument(url).then(function(pdf) {
  thePDF = pdf;
  numPages = pdf.numPages;
  pdf.getPage(1).then(handlePages);
});
  


function handlePages(page) {
  var scale = pdfScale;
  var viewport = page.getViewport(scale);
  var canvas = document.createElement("canvas");
  canvas.style.display = "block";
  var context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  page.render({
    canvasContext: context,
    viewport: viewport
  });
  //Add it to the web page
  document.body.appendChild(canvas);
  document.getElementById("canvas-container").appendChild(canvas);
  //Move to next page
  currPage++;
  if (thePDF !== null && currPage <= numPages) {
    thePDF.getPage(currPage).then(handlePages);
  }
}