Welcome folks today in this blog post we will be building a full custom pdf viewer app in browser using pdf.js library & javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My PDF Viewer</title> <style> #canvas_container { width: 800px; height: 450px; overflow: auto; background: #333; text-align: center; border: solid 3px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"> </script> </head> <body> <div id="my_pdf_viewer"> <div id="canvas_container"> <canvas id="pdf_renderer"></canvas> </div> <div id="navigation_controls"> <button id="go_previous">Previous</button> <input id="current_page" value="1" type="number" /> <button id="go_next">Next</button> </div> <div id="zoom_controls"> <button id="zoom_in">+</button> <button id="zoom_out">-</button> </div> </div> </body> </html> |
As you can see in the above html we have the div tag inside which we have the canvas element where we will be rendering the pdf document. The pdf document needs to be present inside the root directory. And then we have navigation controls for going to previous and next page inside the pdf document. And also we have zoom controls to go to deep inside the pdf document. And we can even go to a page manually typing in the input field. And also guys we are applying the custom css styles to the pdf document.
Now we need to add the javascript code to actually render the pdf document inside the canvas as you can see above. Now make a script.js file and copy paste the following code which is given below
script.js
|
1 2 3 4 5 |
var myState = { pdf: null, currentPage: 1, zoom: 1 } |
As you can see we are declaring the object in which we have three properties for the input pdf file which is null and then we have the currentPage which is initialized to 1 and the zoom level is 1.
|
1 2 3 4 5 6 |
pdfjsLib.getDocument('sample.pdf').then((pdf) => { myState.pdf = pdf; render(); }); |
As you can see in the above code we are using the pdf.js library and using the method getDocument() to load the sample.pdf file which is stored in the same directory. And then it returns a promise and inside it we are attaching to the state variable state. And then we are calling the render() method.
Now we need to define this render() method which will actually show the pdf document in the canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function render() { myState.pdf.getPage(myState.currentPage).then((page) => { var canvas = document.getElementById("pdf_renderer"); var ctx = canvas.getContext('2d'); var viewport = page.getViewport(myState.zoom); canvas.width = viewport.width; canvas.height = viewport.height; page.render({ canvasContext: ctx, viewport: viewport }); }); } |
As you can see inside the render() method we are getting the current page of the pdf document using the pdf.js library method called getPage() and it returns a promise and inside it we are attaching the pdf document to the canvas and then we are getting the canvas 2d content and then we are attaching the zoom level of the pdf document by making the width & height of the canvas equal to the actual viewport width and height. And lastly we are using the render() method of the pdf.js library to actually show the pdf document with the options.
Code For Previous & Next Buttons
Now we will be writing the javascript code so that previous and next buttons work
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
document.getElementById('go_previous') .addEventListener('click', (e) => { if (myState.pdf == null || myState.currentPage == 1) return; myState.currentPage -= 1; document.getElementById("current_page").value = myState.currentPage; render(); }); document.getElementById('go_next') .addEventListener('click', (e) => { if (myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) return; myState.currentPage += 1; document.getElementById("current_page").value = myState.currentPage; render(); }); |
As you can see we have attached the onclick event listener to both the buttons. In the previous button we are decrementing the value of the current page to go to previous page. And in the next page button we are incrementing the value of the current page. And in both cases we are calling the render() method again to render the pdf document on the canvas.
Manually Going to Any Page in PDF Document
Now guys we will be adding the javascript code to go to any specific page by providing the value inside the input field.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
document.getElementById('current_page') .addEventListener('keypress', (e) => { if (myState.pdf == null) return; // Get key code var code = (e.keyCode ? e.keyCode : e.which); // If key code matches that of the Enter key if (code == 13) { var desiredPage = document.getElementById('current_page').valueAsNumber; if (desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) { myState.currentPage = desiredPage; document.getElementById("current_page").value = desiredPage; render(); } } }); |
As you can see we have attached the keypress event listener to the input field where we are taking the value of the page number that user needs to go to. And then we are simply changing the value of the currentPage variable to match the value passed. And then again calling the render() method again to render the pdf document on the canvas.
Code For Zoom in and Out Controls
Now guys we will be writing the javascript code for zooming in and out of the pdf document
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
document.getElementById('zoom_in') .addEventListener('click', (e) => { if (myState.pdf == null) return; myState.zoom += 0.5; render(); }); document.getElementById('zoom_out') .addEventListener('click', (e) => { if (myState.pdf == null) return; myState.zoom -= 0.5; render(); }); |
As you can see we are attaching the onclickevent listener to both the buttons. In the zoom in we are increasing the zoom value by adding 0.5 to zoom value. And in the zoom out we are decrementing the value of the zoom variable by 0.5
