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 Viewer

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 PDF.js Express Plus with React

This guide will help you integrate a free trial of PDF.js Express 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
PDF.js Express does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of PDF.js Express SDK works without a license key. A commercial license key is required for use in a production environment. Please purchase a license key if you do not have one.

1. Install PDF.js Express NPM module

Run the following command in your Terminal or Command Line:

npm i @pdftron/pdfjs-express

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/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';
  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/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) => {

      });
  }, []);

  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