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); }
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.