Running WebViewer as a Web Component

Starting in 10.2 you can choose to instantiate WebViewer using a Web Component instead of an iframe.

Up until now, WebViewer has been instantiated using an iframe. An iframe, or inline frame, is an HTML document embedded inside another HTML document. Iframes have several benefits, such as content isolation and the ability to display content from different sources. However, they also present certain drawbacks. For instance, iframes can slow down site performance as the browser needs to load two separate pages. They can also pose accessibility challenges for assistive technologies like screen readers. Furthermore, running WebViewer in an iframe prevents the parent page from accessing its content directly, limiting opportunities for data gathering and analytics to better understand how users interact with your documents.

Web Components are a suite of web platform APIs that allow developers to create custom, reusable, encapsulated HTML tags for use in web pages and apps. As part of the web browser standard, they're an excellent choice for creating reusable code modules.

Benefits of Web Components:

• Encapsulation: Styles and behaviors within a web component are self-contained, preventing conflict with other code by avoiding global scope leakage.
• Reusability: Web Components can be reused across different projects or even within different parts of the same project, enhancing development efficiency.
• Interoperability: Web Components integrate well with existing web technologies and are compatible with any JavaScript library or framework that supports HTML.
• Standardization: Built on web standards, modern browsers natively support Web Components without the need for additional libraries.

With the release of version 10.2, you can now instantiate WebViewer as a Web Component. This allows you to leverage the advantages of encapsulation and reusability while giving your site direct access to the viewer's content. As a result, you can create a more seamless experience for your users and gather data and analytics on how they interact with your documents.

If you're currently using NPM to integrate WebViewer into your project, the code changes needed to instantiate WebViewer as a Web Component are minimal. Just replace the WebViewer function with WebViewer.WebComponent and everything else is the same.

import WebViewer from '@pdftron/webviewer'

WebViewer.WebComponent({
  path: '/public/webviewer',
  licenseKey: 'YOUR_LICENSE_KEY',
}, document.getElementById('viewer'))
  .then(instance => {
    const { UI, Core } = instance;
    const { documentViewer, annotationManager, Tools, Annotations } = Core;
    // call methods from UI, Core, documentViewer and annotationManager as needed

    documentViewer.addEventListener('documentLoaded', () => {
      // call methods relating to the loaded document
    });

    instance.UI.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf');
  })

Manual integration is also straightforward. For more info please refer to the manual integration guide.

The default constructor will continue to use an iframe, but we recommend you start testing your application with the Web Component to ensure a smooth transition when we deprecate the iframe constructor in a future release.

Large resource and worker files can be hosted on a CDN or some other external server for faster access and caching. WebViewer provides several APIs for dealing with cross-origin resource sharing issues and you can read more about it in this Cross Origin Workers guide.