Implement WebViewer in a TypeScript Project

By adding a type definitions file, webviewer.d.ts, this sample shows how to use WebViewer API in a TypeScript project to create a WebViewer component and call methods from the docViewer and annotManager objects in the instance. It also shows how to access other Apryse namespaces such as Tools and Annotations

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Once you generate your license key, it will automatically be included in your sample code below.

Click the button below to view the full project in GitHub.

TypeScript

index.ts

/// <reference path="../webviewer.d.ts" />
import WebViewer from '@pdftron/webviewer'
WebViewer({
    path: '/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',
  }, document.getElementById('viewer'))
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;
    const annotManager = instance.Core.annotationManager;
    // call methods from instance, docViewer and annotManager as needed
  
    // you can also access major namespaces from the instance as follows:
    const Tools = instance.Core.Tools;
    const Annotations = instance.Core.Annotations;
  });