Source Code

ZoomIn and ZoomOut on-button click-PDF.js

HTML PDF viewer Zoom-in and Zoom-Out Example

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


Example : index.html



<h1>ZoomIn and ZoomOut on-button click - Custom PDF Rendering<a href="https://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" alt="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>
<canvas id="canvas-initalize" style="border:2px  solid red;"></canvas>

Example : App.js


 <script id="script">
         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);
         }
      </script>

Example : Style.css