ZoomingPDFViewer-zoomin and zoomout on-button click – Custom PDF Rendering

The PDF.js Main purpose library is a easy to open source allow source code tool created by the developers and more easy way to community and supported by Browser Mozilla.
Simple Prerequisites
1.pdf.js
2.pdf.worker.js

Zoom Controls Tutorial With Example For PDF.js

It is main Goal is to display all the data file PDF files. we can show files on the HTML simple canvas or use a data sample viewer HTML Source code to that converts PDF doc documents img format into DOM elements.

we can also write my simple docs your own HTML viewer. In this Post, we will display how to create a PDF viewer Step – by – step using canvas and file PDF.js.

HTML PDF viewer Zoom-in and Zoom-Out Example

Include Libs

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

include HTML

ZoomIn and ZoomOut on-button click - Custom PDF RenderingDownload
next page
prev page
zoom in
zoom out

Script.js

var scaleunitdata = 0.5; // make scaleunitdata a global variable
var PdfFilerd; // another global we’ll use for the buttons
var url = ‘http://cdn.mozilla.net/pdfjs/tracemonkey.pdf’ // PDF to load: change this to a file that exists;
var scale = scaleunitdata; // render with global scaleunitdata variable

 
         var yourpagenumberstart = 1;
         var scaleunitdata = 0.5; 
         var PdfFilerd; 
         var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'

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

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

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

         var nextbutton = document.getElementById("nextbutton");
         nextbutton.onclick = function() {
            if (yourpagenumberstart >= PdfFilerd.numPages) {
               return;
            }
            yourpagenumberstart++;
            condatarange(PdfFilerd, yourpagenumberstart);
         }

         var prevbutton = document.getElementById("prevbutton");
         prevbutton.onclick = function() {
            if (yourpagenumberstart <= 1) {
               return;
            }
            yourpagenumberstart--;
            condatarange(PdfFilerd, yourpagenumberstart);
         }

         var ButtonZoommindata = document.getElementById("ButtonZoommindata");
         ButtonZoommindata.onclick = function() {
            scaleunitdata = scaleunitdata + 0.25;
            condatarange(PdfFilerd, yourpagenumberstart);
         }

         var ButtonZoomdata = document.getElementById("ButtonZoomdata");
         ButtonZoomdata.onclick = function() {
            if (scaleunitdata <= 0.25) {
               return;
            }
            scaleunitdata = scaleunitdata - 0.25;
            condatarange(PdfFilerd, yourpagenumberstart);
         }
      

Example