Some test text!

menu
TypeScriptkeyboard_arrow_down

Get started with WebViewer & TypeScript

Welcome to PDFTron. This guide will show you how to get started with a free trial of the WebViewer SDK with a basic TypeScript project using the declaration file using it to display a simple WebViewer element on a local server. Your free trial includes unlimited trial usage and support from solution engineers.

PDFTron now has a working beta TypeScript declaration file that you can use with your projects to reap the benefits of static type checking and autocomplete to improve the speed of your development process.

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-typescript-sample repository:

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

    cd webviewer-typescript-sample
    npm install

    This will automatically download and extract the PDFTron WebViewer Package and other dependencies.

  3. Use the following command to watch for changes in .ts files present in the src folder. If you make changes, it will automatically recompile the index.ts file again to produce a matching index.js file which the browser will use.

    npm run watch

    You may get some errors regarding 'object' and 'Promise' types but they can be safely ignored. The watch command will occupy a process.

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

linkSample overview

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

webviewer-typescript-sample
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.json
├── node_modules
│   ├── ...
├── public  
│   ├── lib
│   │    ├── ...
│   └── index.html
└── src
    ├── index.ts
    └── 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 the TypeScript file with the WebViewer instantiation which is compiled down to JavaScript in index.js.

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

linkRun the sample

  1. Run the application by executing the following in a new shell service provider window (while the previous one is still running):

    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 index.ts in your favorite text editor and add the API calls to the callback for the WebViewer instantiation:

WebViewer({
    path: '../public/lib', // path to the PDFTron 'lib' folder on your server
    licenseKey: 'Insert commercial license key here after purchase',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
    // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
  }, document.getElementById('viewer'))
  .then(function(instance) {
    const docViewer = instance.docViewer;
    const annotManager = instance.annotManager;
    // call methods from instance, docViewer and annotManager as needed
  
    // you can also access major namespaces from the instance as follows:
    const Tools = instance.Tools;
    const Annotations = instance.Annotations;
  });

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following with the help of autocomplete and type intellisense in your IDE:

instance.setTheme('dark');

Execute npm start if it isn't already running, and the theme of the viewer will change. Refresh your browser page if the server is already running to see your changes.

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.