Creating a PDF Viewer in JavaScript

Learn how to create a PDF viewer in Javascript using PDF.js

PDF.js is a JavaScript library maintained by Mozilla and designed for handling PDFs in JavaScript.

We are going to create a PDF viewer which will have the following functionality:

1. View a PDF
2. Go to the next page
3. Go to the previous page
4. Go to a particular page number

First download PDF.js files from here.

HTML File for Rendering the PDF

Create a new index.html file, and in that create:

• canvas → Where the pdf will be rendered.
• previous button → To go to the previous page.
• next button → To go to the next page.
• input box → To enter a page number.
• Go to page button → Button to go to a particular page.
• 2 span elements → Display the current page number and total pages of the PDF

https://gist.github.com/Jagathishrex/374736c44b1fd614fcfe18c76ea71cb5#file-index-html

Initializing the JavaScript File for Rendering the PDF

In addition to the index.html file, create a script.js file where we write our JavaScript code to create a PDF viewer.

First initialize the variables:

https://gist.github.com/Jagathishrex/e3fe818fc3106410ba1c729ad4d0d4a5#file-init-js

Now add event listeners to handle the PDF renderer once the page loads:

https://gist.github.com/Jagathishrex/15d1ed501bbc9793f817dc83b0702e83#file-evets-js

initPDFRenderer Function

• We need to initialize the PDF.js with a source PDF
• We can use the getDocument method to get a promise which resolves to pdfData
• The PDF data has a function getPage
• The getPage will return a promise
• Once the promise is resolved we get the page data
• We can then use the render method in the page data to render it in the canvas

https://gist.github.com/Jagathishrex/eb8954c0d83d5c3fbfdd016c710171b5#file-initpdfrenderer-js

Now when we call initPdfRenderer, this will assign the pdfData to the pdf variable.

Add events for pagination buttons

Add events for previousButton, nextButton, and goToPage buttons.

https://gist.github.com/Jagathishrex/c5947554bea02b27a4226df5682054a8#file-initbtnevents-js

renderPage function

Now let’s create a renderPage function to render the PDF page to the canvas:

https://gist.github.com/Jagathishrex/ade1780cb31bd3bea55827c5d3722f28#file-renderpage-js

We have a method to get pdfData and render page. Let’s write our pageRenderingQueue.

If the user clicks next page/previous page it will add/subtract 1 to the currentPageNum and pass it to the renderPageQueue method. This will check if the pageRenderingQueue is null. If it is null, then we call the renderPage method, else assign the page number which is to be rendered to the queue. Once the page rendering is complete, it will check if the pageQueue is empty and perform the respective action if needed.

https://gist.github.com/Jagathishrex/b8a3f0f293451464d1d1e7c1e272b6c5#file-renderqueue-js

Let’s create a renderNextPage and renderPreviousPage method. 
If the user clicks “next page”, do currentPageNum + 1 and call renderPage. Similarly, for “previous page” do currentPageNum — 1 and call renderPage. We also need to check if the currentPageNum is the first or last page.

https://gist.github.com/Jagathishrex/f4e3859b8fb360c444d3ca11f57e1269#file-nexandprevpage-js

Now let’s implement the “go to page number” function.

Get the page number from the input box, then check if the number is a valid number and call the renderPage method.

https://gist.github.com/Jagathishrex/8d85e419af007dbb05f91c52458286f9#file-gotopage-js

So the final code is:

https://gist.github.com/Jagathishrex/08fa099b4b01b04c30ecc6d203f7f05e

Thanks for Reading 📖. I hope you enjoyed the article. If you found any typos or mistakes, send me a private note 📝 Thanks 🙏 😊 .

Follow me JavaScript Jeep🚙💨 .

Please make a donation here. 98% of your donation is donated to someone needs food 🥘. Thanks in advance.