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

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

<h1>ZoomIn and ZoomOut on-button click - Custom PDF Rendering<a href="https://www.pakainfo.com/" target="_blank" title="pdf.js simple example,pdf.js documentation,pdf.js viewport,pdf.js getdocument,pdf js viewer html example,embed pdf js,pdf js render all pages,pdf js text selection" class="download">Download</a></h1>
<button id="nextbutton" type="button">next page</button>
<button id="prevbutton" type="button">prev page</button>
<button id="ButtonZoommindata" type="button">zoom in</button>
<button id="ButtonZoomdata" type="button">zoom out</button>
<br>

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