Configuration Files

There are two ways of adding customization to WebViewer, the first way is by accessing the WebViewer instance within your app. The second way is by using a config file, which is a stand-alone JavaScript file executed inside WebViewer's iframe. This article will provide a detailed explanation of the second method.

Initialize configuration

You can organize your customized code in a separate JavaScript file that is executed in the context of the iframe. In this way, you have direct access to the iframe's window and document, and you can use WebViewer's global methods directly.

Configuration Files are recommended when you are hosting the WebViewer webviewer folder on a separate server from your application. Since the config file is executed directly in the iframe there are no cross origin issues.

To instantiate WebViewer with a config file you just need to set the config option in the WebViewer constructor. For example:

// app.js
ComPDFKitViewer({
  path: 'https://myserver.com/',
  initialDoc: 'https://www.example.com/test.pdf',
  licenseKey: 'Input your license here',
  config: 'path/to/your/config.js'
}, document.getElementById('viewer'));

A relative config path is resolved against the UI folder, uiPath (default {path}webviewer/, see Deployment), so the example above loads https://myserver.com/webviewer/path/to/your/config.js. When the UI is hosted on another server, use a full URL so the file location is clear.

When the UI is on a different origin from your page, the outer page cannot reach the WebViewer instance: ComPDFKitViewer(...) resolves with undefined, and function options (such as callbacks) cannot be passed into the iframe. Put that code in the config file instead.

Important events

The config file is executed before the viewer interface is mounted and before any document is loaded. Inside the iframe, the global instance object (instance.UI and instance.Core) is already available, so you can listen for the following events to be notified at key points.

viewerLoaded

When the WebViewer finishes initialization and the interface is mounted, instance.UI fires the UI.Events.VIEWER_LOADED event. Listen for it to run your custom initialization logic (such as UI customization). The event is sticky: a listener added after the viewer has loaded is still called.

// config.js executed inside the iframe
instance.UI.addEventListener(instance.UI.Events.VIEWER_LOADED, () => {
  console.log('Viewer Loaded');
});

documentLoaded

Once documentLoaded has fired, you can access document as well as functions related to pages on DocumentViewer and AnnotationManager.

This event is fired by instance.Core.documentViewer. On a same-origin page it is also reachable from the outer page as instance.Core.documentViewer of the instance that ComPDFKitViewer(...) resolves with.

// config.js executed inside the iframe
instance.Core.documentViewer.addEventListener('documentLoaded', () => {
  console.log('Document Loaded');

  const { annotationManager, Annotations } = instance.Core;
  const square = new Annotations.RectangleAnnotation({
    PageNumber: 1,
    X: 50,
    Y: 50,
    Width: 50,
    Height: 50,
    StrokeThickness: 2,
    Opacity: 1,
    FillColor: null,
    StrokeColor: new Annotations.Color(255, 0, 0),
    Style: 'solid'
  });
  annotationManager.addAnnotation(square);
});

Accessing outer page inside the iframe

If you want to access the outer page from inside the iframe, like from code in your config file, you can access the parent window using window.parent. So if you defined an API that's loaded on your HTML page, you could access it from inside the iframe like window.parent.myApi.myFunction().