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.

  How to Get Yii last inserted ID from database

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

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

<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

  Multidimensional array Difference in php

 
         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


Related FAQ

Here are some more FAQ related to this Article:

  1.   Working with datetime in PHP Examples
  2.   How to create a Login page with PHP and MySQL
  3.   laravel get all table names
  4.   PHP Stripe api Send Accept Payment Integration
  5.   Laravel Debugbar Your Laravel Application
  6.   Files Uploading on Amazon S3 server using Laravel 5.4 Part-1
  7.   ng-init Directive using Angular Example with demo
  8.   jQuery trigger function viewport Example
  9.   How to Get Yii last inserted ID from database
  10.   Files Uploading on Amazon S3 server using Laravel 5.4 Part-1

Leave a Reply

Your email address will not be published. Required fields are marked *