Compatible JavaScript Frameworks for PDF Viewer

WebViewer is compatible with any JavaScript framework because it only needs a DOM element to place the document-viewing component. The following pre-built samples are available for quick integration, but it's easy to setup WebViewer with any framework.

Integrating WebViewer into a JavaScript framework (any framework) is broken down to three steps:

1. Importing
2. Instantiating
3. Calling APIs

WebViewer can be integrated into your application in several ways, depending on your project setup. The main difference between these approaches is how WebViewer is loaded and how your project is structured.

Import using a script tag

This approach is best when you're working with plain HTML and JavaScript projects and want a quick setup with no build tools. For example, this could mean you're following a manual installation path that involves downloading the SDK. The integration doesn't require Node Package Manager (npm) or any build tools, and it's the fastest way to get started with the WebViewer library.

The import looks similar to this in your HTML:

1<script src='PATH_TO_WEBVIEWER/lib/webviewer.min.js'></script>

This method is not ideal for large applications and lacks built-in module or dependency management.

Import using npm (recommended)

This approach is best when you're building a modern web application and want to manage dependencies using a package manager. For example, this could mean you're using a framework such as React, Angular, or Vue, or a build tool like Webpack, Vite, or Parcel. By installing WebViewer via npm, you download WebViewer from the npm registry. Both the JavaScript API and runtime assets are managed through the npm package. You can then import WebViewer directly into your JavaScript files using ES module syntax (import).

The integration looks similar to this in your JavaScript:

1import WebViewer from '@pdftron/webviewer';

This method requires a build tool and a module-based setup, but provides better scalability, maintainability, and dependency management for larger applications.

Import using a hybrid approach

This approach is best when you're using a bundler but still need to host the WebViewer runtime files (lib folder) manually. For example, your application may use a build tool like Webpack, Vite, or Parcel, while the WebViewer SDK is downloaded and served from your own server. In this setup, WebViewer is installed from locally downloaded SDK files instead of the npm registry:

1npm install PATH_TO_WEBVIEWER/lib

You can then use ES module syntax (import) in your application code, while WebViewer’s runtime files (UI assets, workers, etc.) are loaded separately from the manually hosted lib folder:

1// Import WebViewer from node_modules (installed from local SDK files, not npm)
2// This is a UMD build, so it exposes WebViewer on the global `window` object
3import 'webviewer/webviewer.min.js';
4
5// Access the global WebViewer instance
6const WebViewer = window.WebViewer;
7
8WebViewer({ path: '/WebViewer/lib' }, document.getElementById('viewer'));

Because import is used, your HTML must load the JavaScript file with <script type="module"> for the browser to execute it correctly:

1<script type="module" src="/main.js"></script

This approach can be useful in restricted or enterprise environments where direct npm installation is not preferred. While it offers flexibility, it's more complex than the script tag or full npm methods. It's typically recommended only for advanced or specialized use cases.

The WebViewer constructor takes two arguments: options and a DOM element. Regardless of the framework, you must pass a DOM element which will contain WebViewer's iframe.

Given the instantiation code:

1WebViewer({
2  path: 'PATH_TO_WEBVIEWER/lib',
3  licenseKey: 'YOUR_LICENSE_KEY',
4  initialDoc: 'path/to/doc.pdf'
5}, HTML_DIV_ELEMENT);

you can reference a DOM element based on your framework:

1// Vanilla JS
2WebViewer({ ... }, document.getElementById('viewer'));
3// React
4WebViewer({ ... }, this.viewerRef.current);
5// Angular
6WebViewer({ ... }, this.viewer.nativeElement);

Before calling APIs, you should wait for appropriate events to be fired from WebViewer.

1// Vanilla JS
2WebViewer(...)
3  .then(instance => {
4    onReady();
5
6    const { documentViewer } = instance.Core;
7    documentViewer.addEventListener('documentLoaded', onDocumentLoaded);
8  });
9  
10// React
11useEffect(() => {
12    WebViewer(...).then(instance => {
13      onReady(instance);
14
15      const { documentViewer } = instance.Core;
16      documentViewer.addEventListener('documentLoaded', () => {
17        onDocumentLoaded(instance);
18      });
19    });
20  }, []);
21
22// Angular
23ngAfterViewInit(): void {
24    WebViewer(...).then(instance => {
25      this.onReady(instance);
26
27      const { documentViewer } = instance.Core;
28      documentViewer.addEventListener('documentLoaded', () => {
29        this.onDocumentLoaded(instance);
30      });
31    });
32  }
33

1// Vanilla JS
2WebViewer(...)
3  .then(instance => {
4    onReady();
5
6    const { docViewer } = instance;
7    docViewer.on('documentLoaded', onDocumentLoaded);
8  });
9// React and Angular
10WebViewer(...)
11  .then(instance => {
12    this.onReady(instance);
13
14    const { docViewer } = instance;
15    docViewer.on('documentLoaded', this.onDocumentLoaded.bind(this, instance));
16  });

and call APIs from viewer instance:

1// Vanilla JS
2const onReady = instance => {
3  // Executed when the viewer is ready
4  // NOTE: Document is not loaded yet
5  instance.UI.enableFilePicker();
6};
7const onDocumentLoaded = instance => {
8  // Executed when the document is loaded
9  // NOTE: Document is not rendered yet
10   instance.UI.getPageCount();
11}
12// React and Angular
13onReady(instance) {
14  // Executed when the viewer is ready
15  // NOTE: Document is not loaded yet
16   instance.UI.enableFilePicker();
17}
18onDocumentLoaded(instance) {
19  // Executed when the document is loaded
20  // NOTE: Document is not rendered yet
21   instance.UI.getPageCount();
22}

1// Vanilla JS
2const onReady = instance => {
3  // Executed when the viewer is ready
4  // NOTE: Document is not loaded yet
5  instance.enableFilePicker();
6};
7const onDocumentLoaded = instance => {
8  // Executed when the document is loaded
9  // NOTE: Document is not rendered yet
10  instance.getPageCount();
11}
12// React and Angular
13onReady(instance) {
14  // Executed when the viewer is ready
15  // NOTE: Document is not loaded yet
16  instance.enableFilePicker();
17}
18onDocumentLoaded(instance) {
19  // Executed when the document is loaded
20  // NOTE: Document is not rendered yet
21  instance.getPageCount();
22}