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 lib 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.init({
  path: 'https://myserver.com/webviewer/lib',
  pdfUrl: 'https://www.example.com/test.pdf',
  license: 'Input your license here',
  config: 'path/to/your/config.js'
}, document.getElementById('viewer'));

Inportant events

The config file is executed even before the core objects are instantiated, so you won't be able to call core functions immediately. You can listen for events on the HTML document object that will notify you at key points.

viewerLoaded

When the WebViewer finishes initialization, it sends a message of type viewerLoaded to the current window and the parent window. We listen for this message using the window.addEventListener('message', ...) API and trigger our custom initialization logic (such as UI customization) when it arrives.

This method is captured through the window postMessage API to communicate between your page and the iframe. It’s commonly used when the WebViewer is embedded in an iframe or loaded through an external config file.

// config.js executed inside the iframe
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {
  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'viewerLoaded':
        console.log('Viewer Loaded');
        break;
    }
  }
}

documentLoaded

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

This method listens inside the WebViewer environment, where you already have access to the instance object returned by ComPDFKitViewer.init(...).

// config.js executed inside the iframe
instance.docViewer.addEvent('documentloaded', () => {
  console.log('Document Loaded');

  docViewer.addAnnotations({
    type: 'square',
    pageIndex: 0,
    rect: { left: 50, top: 50, right: 100, bottom: 100 },
    borderWidth: 2,
    opacity: 1,
    fillTransparency: 1,
    fillColor: '',
    color: '#FF0000',
    borderColor: '#FF0000',
    borderStyle: 'solid',
    dashes: []
  });
});

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().