Get Started

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

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Integrating React with PDF.js Express JavaScript PDF library

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

Guides Samples API docs