Create a PDF Viewer with ES6 JavaScript

Image for post
Image for post
Photo by XPS on Unsplash

In this article we are going to create a PDF viewer using modern ES6 JavaScript.

So, let’s start with our project. I am creating a new folder PDFviewerJS and then the three files index.html, style.css and main.js in it. After that i am opening it with Visual Studio Code. I am doing all this from terminal, but it can be done manually also.

Image for post
Image for post
PDFviewerJS

In VS Code also added a sample.pdf file. After that created a basic html structure in index.html file and changed the title and linked the css file.

Also, linked the main.js file a the bottom. We are also using the awesome pdf.js library from mozilla to display our pdf. You can find more about it here.

Image for post
Image for post
index.html

Next, we will include font awesome in our project. After that inside our body creating two button with font-awesome. Also, displaying the page count.

We are also adding a canvas element, which will show our pdf.

Image for post
Image for post
font awesome

After adding all the above click on the Go Live at the bottom right of the VS Code. This is coming because i have the VS Code extension Live Server installed.

So, our basic project looks like below.

Image for post
Image for post
Basic Project

After this we will head over to main.js and start writing our main logic. First, we are declaring some variables, which we are going to use in our project. We are also making the canvas variable equal to the pdf-render id, which we defined in the index.html.

After that we created the renderPage function, which we are soon going to complete.

We are using the pdfjsLib library provide by pdf.js and sending our sample.pdf in it. It will return a promise, which we are consoling first. After that also setting the page-count text, equal to the numPages.

We are also passing the pageNum to the renderPage, which we are going to complete soon.

Image for post
Image for post
main.js

Now, our webpage will look like below and in console we are also getting the different data of the pdf back.

Image for post
Image for post
pdf

Next, we are going to complete the renderPage function. Here, we are first making the pageIsRendering as true. After that using another function from pdf.js called getPage and passing the num, which is 1 initially.

After getting the content of the pdf in page variable, we are using it to set the height , width and the renderCtx.

We are using the page.render(), to check if the variable pageNumIsPending is null. If it is not null, we are again calling the function renderPage.

We are also targeting the page-num id and showing the current page number.

Image for post
Image for post
renderPage

Now, when we go to our web-page it show correctly everything and our one-pager pdf.

Image for post
Image for post
pdf

To check the complete functionality of the project, we need a pdf with more pages. So, i added a 9 page pdf to the project TheFly.pdf and changed the path.

To implement the pdf with pages, we need to create three functions. Here, in the showPrevPage, we are first checking whether it is the first page. If it is not we are calling the function queueRenderPage, after reducing the pageNum.

Similarly, in the showNextPage, we are first checking whether it is the last page. If it is not we are calling the function queueRenderPage, after adding to the pageNum.

From the queueRenderPage we are calling the renderPage , if the pageIsRendering is false.

Image for post
Image for post
Three Functions

Now, we will link the button containing the prev-page to call function showPrevPage on click. Similarly, the button containing the next-page to call function showNextPage on click.

Image for post
Image for post
Button Link

Now, our project is fully functional and we are able to see all pages of pdf on click of the Prev Page and Next Page button.

Image for post
Image for post
Prev Page

Next, let style the project a bit by adding styles in style.css file.

Image for post
Image for post
style.css

Now, our button will look nicer and have a great background also.

Image for post
Image for post
Nice button

We are also going to add the logic for error handling in the project. First in the style.css add css for a new class error.

Image for post
Image for post
style.css

Back in the main.js file add a .catch for the err. Here, we are creating a new div with class of error. After that we are displaying it by inserting before the canvas.

We are also hiding the top-bar, which shows the buttons.

Image for post
Image for post
catch

Now, make the url wrong like below.

Now, our web-page will show the error.

Image for post
Image for post
The Error

This completes our PDF Viewer project. Hoped you liked it. You can find the github repo for the same here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store