Some test text!

menu
Reactkeyboard_arrow_down

Get started with WebViewer & React

Welcome to PDFTron. This guide will help you integrate a free trial of WebViewer into React applications on the browser. It will help you clone the React sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.

linkPrerequisites

Node.js is not required for WebViewer
WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of PDFTron SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

linkInitial setup

  1. Clone the webviewer-react-sample repository:

    git clone https://github.com/PDFTron/webviewer-react-sample.git
  2. Enter the directory and run npm install:

    cd webviewer-react-sample
    npm install

    This will automatically download and extract the PDFTron WebViewer Package.

You are now ready to run the sample or use more WebViewer APIs.

linkSample overview

After initial setup, the webviewer-react-sample directory should be laid out like this:

webviewer-react-sample
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── node_modules
│   ├── ...
├── public  
│   ├── assets
│   ├── files
│   ├── lib
│   │    ├── ...
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    └── index.js

Notable files and directories include:

File/FolderDescription
LICENSELists the copyright and license information.
package.jsonLists the manifest of the project and contains the author/version metadata.
publicContains the static index.html page that is loaded onto the browser and all other resources for the react project including the icon. This is also where the Webviewer lib is extracted to when you run npm install.
srcContains all the Javascript and CSS files for the React application.
src/App.jsContains the App class which extends the React Component class. Once it is mounted onto the index.html DOM, it instantiates a WebViewer.

src/App.js is also where the WebViewer API calls are placed (inside methods of the App class).

linkRun the sample

  1. Run the application by executing:

    npm start

    Your app should look like this:

    react WebViewer Sample

    Note: If your browser does not open automatically to open the WebViewer, navigate to localhost:3000 to see the project.

linkUse more WebViewer APIs

To call more WebViewer APIs, open /www/js/index.js in your favorite text editor and add the API calls to the callback for the WebViewer instantiation:

componentDidMount() {
  window.WebViewer({
    path: 'lib',
    initialDoc: 'files/webviewer-demo-annotated.pdf'
  }, this.viewer.current).then(instance => {
    // at this point, the viewer is 'ready'
    // call methods from instance, docViewer and annotManager as needed
    this.instance = instance;
    this.docViewer = instance.docViewer;
    this.annotManager = instance.annotManager;

    // you can also access major namespaces from the instance as follows:
    // const Tools = instance.Tools;
    // const Annotations = instance.Annotations;

    // now you can access APIs through `this.instance`

    // or listen to events from the viewer element
    this.docViewer.on('documentLoaded', () => {
      // call methods relating to the loaded document
    });

    // ****** Note: Sample contains more events and methods in App.js *****
  });
}

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:

this.instance.setTheme('dark');

Execute npm start again and the theme of the viewer will change.

react Sample Dark

linkNext step

GuidesSamplesAPI docs

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.