How to Load and View PDF Files in a JavaScript Application

Adding a PDF viewer to a JavaScript application allows end-users to access, navigate, and interact with PDF documents directly in the browser. Whether you're building a document management system, financial application, or enterprise reporting platform, integrating PDF viewing capabilities helps create a seamless document experience without requiring users to download files or switch between applications.

In this step-by-step guide, you'll learn how to integrate a JavaScript PDF Viewer, in this example, Document Solutions PDF Viewer (DsPdfViewer), into a web application. We'll walk through setting up the viewer, displaying PDF documents, and loading files from multiple sources using a PDF viewer control.

Download a Trial of Document Solutions for PDF to Test this Included JS PDF Viewer Control!

Steps to Add PDF Viewer Control to a JavaScript Web Application

• Install the JavaScript PDF Viewer
• Create and configure a PDF viewer
• Load a PDF File with JavaScript
• Let users open local PDF files
• Load PDFs from a URL
• Load PDFs hosted on another domain

Download a finished Sample Application

Install the JavaScript PDF Viewer

Install the JS PDF viewer npm package. In this tutorial, we will be using Document Solutions PDF Viewer (DsPdfViewer), which is the @mescius/dspdfviewer package:

npm install @mescius/dspdfviewer

The package contains the files needed to integrate DsPdfViewer into your web application.

Add a PDF Viewer to Your JavaScript Application

First, add an HTML element that will host the viewer:

<div id="viewer"></div>

Give the container enough space to display the document:

#viewer {
    height: 100vh;
    width: 100%;
}

Then import and initialize the JS PDF viewer in the JavaScript demo app:

import { DsPdfViewer } from "@mescius/dspdfviewer";

const viewer = new DsPdfViewer("#viewer", {
    workerSrc: "/node_modules/@mescius/dspdfviewer/dspdfviewer.worker.js",
    restoreViewStateOnLoad: false
});

viewer.addDefaultPanels();

workerSrc specifies the viewer's Web Worker, which helps with PDF rendering, while addDefaultPanels() adds the standard viewer interface and navigation panels. 

Load a PDF File with JavaScript

Once you've initialized the JavaScript PDF viewer, developers can invoke its open() method to programmatically display a PDF.

viewer.open("/pdf/sample.pdf");

The specified document will open directly inside the PDF viewer.

A complete example looks like this:

import { DsPdfViewer } from "@mescius/dspdfviewer";

const viewer = new DsPdfViewer("#viewer", {
    workerSrc: "/node_modules/@mescius/dspdfviewer/dspdfviewer.worker.js",
    restoreViewStateOnLoad: false
});

viewer.addDefaultPanels();
viewer.open("/pdf/sample.pdf");

This is the basic pattern developers can use to embed PDF viewing functionality into a JavaScript web application. The existing implementation uses the same viewer.open() API to load an application-hosted PDF.

Let Users Open a Local PDF File

Most PDF controls will include a built-in Open Document button in the default toolbar, allowing users to select and open a PDF directly from their computer.

For custom workflows, you can also open the file-selection dialog programmatically with the openLocalFile() method, which opens a file-selection dialog so the user can select a PDF. 

viewer.openLocalFile();

This can be useful when adding a custom toolbar control or integrating PDF selection into another application workflow. Document Solutions JavaScript PDF Viewer supports toolbar and UI customization for these scenarios.

For most applications, the built-in Open Document button is the simplest option. See the documentation here to learn more about the built-in customizable toolbar options.

Load a PDF from a URL

JavaScript PDF Viewers can also open a PDF from a URL; in this example, using the open() method.

This would open a PDF hosted by your application:

viewer.open("/documents/sample.pdf");

This is useful when PDF documents are stored as application assets or generated and hosted by your server.

Load PDFs from Another Domain

Loading a PDF from another domain requires some additional consideration because browsers enforce Cross-Origin Resource Sharing (CORS) rules.

If the remote server permits cross-origin requests, the document can be requested normally. Otherwise, the existing Document Solutions implementation supports proxy loading through the server-side SupportApi.

A viewer configured to use SupportApi follows this pattern:

const viewer = new DsPdfViewer("#viewer", {
    workerSrc: "/node_modules/@mescius/dspdfviewer/dspdfviewer.worker.js",
    restoreViewStateOnLoad: false,
    supportApi: {
        apiUrl: "http://localhost:5004/api/pdf-viewer",
        token: "YOUR_SUPPORT_API_TOKEN",
        webSocketUrl: false
    }
});

viewer.addDefaultPanels();

You can then open the PDF document through the configured CORS proxy.

viewer.open("http://localhost:5004/api/pdf-viewer/CorsProxy?url=https://...sample.pdf");

Download a finished local sample application to try yourself!

Next Steps

You now have a JavaScript PDF viewer that can display PDF documents directly in a web application.

This blog only scratches the surface of the full capabilities a PDF viewer can add to your application. From here, you can customize the viewer and add more advanced features such as:

• Text search
• PDF annotations
• Form filling
• Digital signatures
• Redaction
• PDF editing
• Custom menus and viewer UI

Check our Document Solutions PDF Viewer documentation and demos to learn more!

Download the latest release of this JavaScript PDF Viewer Control