Section:

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.

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

1/// <reference path="../webviewer.d.ts" />
2import WebViewer from '@pdftron/webviewer'
3WebViewer({
4    path: '/lib', // path to the PDFTron 'lib' folder on your server
5    licenseKey: 'Insert commercial license key here after purchase',
6    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
7  }, document.getElementById('viewer'))
8  .then(function(instance) {
9    const docViewer = instance.docViewer;
10    const annotManager = instance.annotManager;
11    // call methods from instance, docViewer and annotManager as needed
12  
13    // you can also access major namespaces from the instance as follows:
14    const Tools = instance.Tools;
15    const Annotations = instance.Annotations;
16  });
17
18
19
20

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales