Building a Custom JavaScript PDF Viewer: PDF.js vs Apryse WebViewer

Summary: Building a custom JavaScript PDF viewer from scratch may involve extra steps when compared to other solutions, but it does give you more control to customize its features, appearance, and performance to meet the specific needs of your project. In this blog, you’ll learn how to build a basic PDF viewer using PDF.js and Apryse WebViewer.

Ever feel constrained by the limitations of existing PDF libraries? Or maybe you’re intrigued by the challenge of creating something from scratch. In this blog, we’ll explore building a custom JavaScript PDF viewer using PDF.js, an open-source solution, and Apryse WebViewer, a commercial solution. In both cases we will do that using HTML and vanilla JavaScript, although we could have used frameworks such as React, Angular or Next.

Whether you are an early career beginner or a seasoned developer, creating a custom PDF viewing experience gives you the freedom to tailor its features, appearance, and performance to your specific needs.

Development for this article was on a Windows 11 machine. But similar results should be available on macOS or Linux.

The projects were scaffolded with Vite 8.2.0, but that could have been done manually.

PDF Viewer versions

1. Replace the contents of your index.html page with the following code:

You may want to use CSS styling. I have included just a minimal amount.

2. Create a JavaScript file called index.js for the functions we’ll use in the viewer. From this point on, we’ll be adding the code to this file and we’ll look at what each part does as we go.

3. Add the following code to the index.js file to import the PDF.js library.

4. Define the following variables to manage the PDF file.

5. Add this function to load, initialize, and render the PDF. We’ll call the function at the end of the index.js file to load a PDF.

6. Index.html contains buttons that allow you to navigate through the PDF. We’ll now add event listeners to implement that:

7. There is also a control on index.html to switch between single-page and multi-page view. We'll add an event handler for that.

8. The render function uses pdfInstance.getPage() to get the pages that need to be rendered based on the pageMode and currentPageIndex values. A <div> container with a <canvas> element is created for each page.

9. Now, we’re ready to add the last function. This function renders each page to its own canvas element and adjusts the scale to fit the container width.

10. The last thing we need to do is call the initPDFViewer function with the path (or URL) of the PDF we want to render using this code:

Remember to specify the path and name of the PDF you want to load.

11. We're now ready to view index.html in a browser, and see the PDF.

And with a few easy steps, you’ve created a basic PDF viewer using JavaScript and PDF.js.

For basic viewing of small and simple PDFs, an open-source option, such as PDF.js, may be cost-effective, but does have its drawbacks. A commercial option, such as Apryse WebViewer, offers more complex features and delivers a more enriching experience.

WebViewer is a JavaScript Document SDK compatible with all frameworks and browsers and is fully featured right out of the box as a single, customizable component, allowing you to view, create, search, annotate, and edit PDFs directly within a browser.

1. Download WebViewer and extract the .zip file to your project directory. Since I'm using Vite, I placed it into my public folder.

2. Create an index.html webpage and add this code:

3. Next, in the index.html file, right below the <div> tag for the PDF, add the following code for the JavaScript functions we’ll use in the viewer:

It’s important to note that you need to ensure the paths are correct. I'm using the default UI but it is easy to create your own customized UI.

4. Start the server.

I'm used Vite to do scaffolding so I can start a server using npm run dev. Alternatively, if you built the sample from scratch, then you can download a simple server using http-server -a localhost then start it with http-server -a localhost.

5. Navigate to the webpage and you will see your PDF.

Congratulations! You’ve just used JavaScript and WebViewer to set up a basic PDF viewer. Already you can see that it is far more functional than the one created with PDF.js, and needed only about 20 lines of code to get started.

Learn how to build a Bootstrap-based PDF viewer using PDF.js

Creating a custom JavaScript PDF viewer allows you to tailor its features, appearance, and performance to deliver a customized viewer for any project. This blog lays out the process to make it easy to understand and implement, regardless of your coding experience. Apryse WebViewer offers powerful features in a highly customizable SDK, making it the more favorable solution of the examples we looked at.

Have questions? Contact us to speak with an expert or even reach out on Discord.

Start your free trial of WebViewer today!