Select a product

PDF.js Express Free Viewerplay_arrow

Professional PDF.js Viewing - Free

PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

Get Started

play_arrow

PDF.js Express Plus

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Integrating React with PDF.js Express Viewer JavaScript PDF library

This guide will help you integrate PDF.js Express Viewer into a React application on the browser. You can also checkout a ready to go sample on GitHub.

Get the React sample source code here

Prerequisites

Node.js is not required for PDF.js Express Viewer
PDF.js Express Viewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
Free license key required.

To use PDF.js Express Viewer you do need a free license key. Please get your free Viewer key here if you do not have one.

1. Install PDF.js Express Viewer NPM module

Run the following command in your Terminal or Command Line:

npm i @pdftron/pdfjs-express-viewer

2. Copy static assets

Next we must copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/pdfjs-express-viewer/public and must be moved into a location that will be served and publicly accessible. In React, it will be public folder.

Inside of a GitHub project, we automate the copying of static resources by executing copy-webviewer-files.js.

3. Place WebViewer into a component

  1. Import WebViewer into your component.
import WebViewer from '@pdftron/pdfjs-express-viewer';
  1. Create a reference where WebViewer will be placed or mounted.
const MyComponent = () => {
  const viewer = useRef(null);

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer}></div>
    </div>
  );
};
  1. Inside of useEffect hook or componentDidMount lifecycle method initialize WebViewer. Ensure that the path property in the constructor points to where you copied static assets node_modules/@pdftron/pdfjs-express-viewer/public in React public folder.
const MyComponent = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: '/webviewer/lib',
        initialDoc: '/files/pdftron_about.pdf',
      },
      viewer.current,
    ).then((instance) => {
        // now you can access APIs through the WebViewer instance
        const { Core } = instance;

        // adding an event listener for when a document is loaded
        Core.documentViewer.addEventListener('documentLoaded', () => {
          console.log('document loaded');
        });

        // adding an event listener for when the page number has changed
        Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
          console.log(`Page number is: ${pageNumber}`);
        });
      });
    }, []);

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer}></div>
    </div>
  );
};
  1. Run the app by running npm start.

You can now checkout other guides like how to open your own documents or how to disable certain features.

Next step

GuidesSamplesAPI docs