PDF Viewer

jsPdf - Moz

HTML

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <h1>Simple PDF.js with zoom</h1>
      <button id="prevbutton" type="button">prev page</button>

      <button id="nextbutton" type="button">next page</button>
      
      <button id="zoominbutton" type="button">zoom in</button>
      <button id="zoomoutbutton" type="button">zoom out</button>
      <input id="printIt" type="button" value="Print">
            <br>
<div class="canvas-container">
<canvas id="the-canvas" style="border:1px  solid black"></canvas>

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

CSS

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

JavaScript

var pageNum = 1;
var pdfScale = 1; // 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'

function renderPage(page) {
  var scale = pdfScale; // render with global pdfScale variable
  var viewport = page.getViewport(scale);
  var canvas = document.getElementById('the-canvas');
  var context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  var renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  page.render(renderContext);
}

function displayPage(pdf, num) {
  pdf.getPage(num)
   .then(function getPage(page) {
     renderPage(page); 
   });
}

var pdfDoc = PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
  displayPage(pdf, 1);
  shownPdf = pdf;
});

var nextbutton = document.getElementById("nextbutton");
nextbutton.onclick = function() {
  if (pageNum >= shownPdf.numPages) {
    return;
  }
  pageNum++;
  displayPage(shownPdf, pageNum);
}

var prevbutton = document.getElementById("prevbutton");
prevbutton.onclick = function() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  displayPage(shownPdf, pageNum);
}

var zoominbutton = document.getElementById("zoominbutton");
zoominbutton.onclick = function() {
  pdfScale = pdfScale + 0.25;
  displayPage(shownPdf, pageNum);
}

var zoomoutbutton = document.getElementById("zoomoutbutton");
zoomoutbutton.onclick = function() {
  if (pdfScale <= 0.25) {
    return;
  }
  pdfScale = pdfScale - 0.25;
  displayPage(shownPdf, pageNum);
}
  
$(document).ready(function() {
  $('body').on('contextmenu', '#the-canvas', function(e){
    alert("Document in Read Only Mode");
    return false; 
  });
  
  $("#printIt").click(function(){
var wnd = window.print('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
wnd.print();
  });
});