How to use PDF.js and how to create a simple PDF viewer for your web in JavaScript
I see this library and it helps me a lot with PDFs I could visualize the PDF online change pages with pure JavaScript it’s amazing I am sharing this library and the code to create a dynamic PDF visualizer for your Web.
I created a video if you want to see it too 📽📹📼 and it has everything you need I will share the code at the final thanks and enjoy.
First you need to create the route app I only had two directories one for the code and one for the PDFs.
Then create the Index.html with two buttons one span and one canvas everyone with their respective ids, and the library is very important I linked my app.js file too.
And here is the code
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas{border: 1px solid #000}</style></head><body><button id="prev">Prev</button><button id="next">Next</button><span id="npages">not yet</span><div><canvas id="cnv"></canvas></div><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script><script src="./app.js"></script></body></html>
Then we will see something like this
And I could start with the JavaScript, you need the use the load event to start our JavaScript and two functions to start I passed the route of our PDF file to make it a little dynamic
const PDFStart = nameRoute => {}const startPdf = () => {PDFStart('../media/r.pdf')}window.addEventListener('load', startPdf);
After that we need the variables that are important for this library, we start with the loadingTask this variable has all the information about the PDF, we passed the nameRoute the route of our PDF file, the pdfDoc the canvas and the context of the canvas the scale and the number of pages for now.
let loadingTask = pdfjsLib.getDocument(nameRoute),pdfDoc = null,canvas = document.querySelector('#cnv'),ctx = canvas.getContext('2d'),scale = 1.5,numPage = 1;
Then I created the promise to get the information of the PDF (PDF.js works with promises) and set the span with the number of pages that the PDF has we will generate another function called GeneratePDF(numPage) I passed the numPage variable that had 1 for now.
loadingTask.promise.then(pdfDoc_ => {pdfDoc = pdfDoc_;document.querySelector('#npages').innerHTML = pdfDoc.numPages;GeneratePDF(numPage)});
The GeneratePDF function is the key because it will print the PDf into the canvas, I used the pdfDoc to get the page with another promise then we need the page viewport (width and height) I set the canvas size and the renderContext object I inserted the ctx and the viewport, next I rendered the page with the information inside the renderContext and with the npages’s span we update the number of the page that was rendered.
const GeneratePDF = numPage => {pdfDoc.getPage(numPage).then(page => {let viewport = page.getViewport({ scale: scale });canvas.height = viewport.height;canvas.width = viewport.width;let renderContext = {canvasContext : ctx,viewport: viewport}page.render(renderContext);})document.querySelector('#npages').innerHTML = numPage;}
For the buttons I need to create events and functions but the logic is not so complicated for the next and prev are almost the same I called with addEventListener and the click event
document.querySelector('#prev').addEventListener('click', PrevPage)document.querySelector('#next').addEventListener('click', NextPage)
The function for prev need a conditional to work correctly if the number of page is equal to 1 return nothing else call the GeneratePDF(numPage) again and the numPage will decrease for one.
const PrevPage = () => {if(numPage === 1){return}numPage--;GeneratePDF(numPage);}
The next page function is similar but if the numPage is equal or more than the pdfDoc.numPages return nothing else numPage will increase for one and call the GeneratePDF(numPage) again
const NextPage = () => {if(numPage >= pdfDoc.numPages){return}numPage++;GeneratePDF(numPage);}
Conclusion
It’s a great Library to visualize PDF online change pages and is easy to learn the documentation is a direct and then you can use this library for your projects.
Sources
https://mozilla.github.io/pdf.js/
https://cdnjs.com/libraries/pdf.js
https://mozilla.github.io/pdf.js/examples/
Codes
https://github.com/rodrigofigueroa/pdfjsvizsaliserforweb
https://youtu.be/l0Z_nJ2KebU
