Advanced annotation loading

For more advanced control over the annotation loading process you can use the setPagesUpdatedInternalAnnotationsTransform function on DocumentViewer. When WebViewer loads a document it will import the annotation data as XFDF and this function allows you to transform that data before it gets loaded into the viewer.

The function that you pass to setPagesUpdatedInternalAnnotationsTransform may be called multiple times, specifying the list of pages that the annotation data is a part of.

You can use the function like this:

WebViewer(...)
  .then(instance => {
    const { documentViewer } = instance.Core;

    documentViewer.setPagesUpdatedInternalAnnotationsTransform((xfdfData, pageList, callback) => {
      // if the pageList is [0, 1, 2, 3] then the data is of all annotations on the first four pages
      // make modifications here
      // ...
      callback(newXfdfData);
    });
  });

One way to use setPagesUpdatedInternalAnnotationsTransform is to replace the original annotation data inside the document with the data from your server. Note that this would also replace any existing links or form fields unless they are also saved on your server.

Alternatively you can modify the existing data that is passed in. When modifying the data it is easiest to first parse it into DOM elements, perform your modifications and then serialize back to a string.

An example of something you might want to do is remove all clickable links:

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance.Core;
    docViewer.setPagesUpdatedInternalAnnotationsTransform((xfdfData, pageList, callback) => {
      const parser = new DOMParser();
      const xfdfElements = parser.parseFromString(xfdfData, 'text/xml');
      [].forEach.call(xfdfElements.querySelectorAll('link'), e => {
        e.parentNode.removeChild(e);
      });

      const serializer = new XMLSerializer();
      callback(serializer.serializeToString(xfdfElements));
    });
  })

Here's another example of changing the color attribute of every annotation to blue:

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance.Core;
    docViewer.setPagesUpdatedInternalAnnotationsTransform((xfdfData, pageList, callback) => {
      const parser = new DOMParser();
      const xfdfElements = parser.parseFromString(xfdfData, 'text/xml');
      const annotations = xfdfElements.querySelector('annots').children;
      [].forEach.call(annotations, annotElement => {
        annotElement.setAttribute('color', '#0000FF');
      });

      const serializer = new XMLSerializer();
      callback(serializer.serializeToString(xfdfElements));
    });
  })

With setPagesUpdatedInternalAnnotationsTransform you have very fine control over all of the annotation data and can modify it exactly as you like.