PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

side menu

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Customize display authors for annotations

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

Often, users will want to change the user name they use for creating annotations. This can create an issue for existing annotations, as these will be linked to a particular annotationUser identifier. The way to get around this is to use display authors, that way the userId attached to an annotation can remain the same, while the display author changes to whatever the user wants it to be.

In the following example we will show how to map a userId (a unique identifier that won't change after being assigned), to a display name.

Map a userId to a Display Author

Use setCustomData and getCustomData to save a userId to an annotation when it is created. Then add a mapping function with setAnnotationDisplayAuthorMap to map the userId to a display author, which will be used as the annotation author name in WebViewer.

WebViewer({
  annotationUser: '1',
  // other constructor options
}, viewerElement).then(instance => {
  const { annotManager } = instance;

  annotManager.on('annotationChanged',  (annotations, action, options) => {
    if (action === 'add' && !options.imported) {
    const annot = annotations[0]
    annot.setCustomData('userId', annotManager.getCurrentUser())
    }
  })

  const mapNames = (annotation) => {
    if(annotation.getCustomData('userId') === '1') {
      return 'Will Riker'
    } else if (annotation.getCustomData('userId') === '2') {
      return 'Jean-Luc Picard'
    }}

  annotManager.setAnnotationDisplayAuthorMap(mapNames);
});
WebViewer({
  annotationUser: '1',
  // other constructor options
}, viewerElement).then(instance => {
  const { annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged',  (annotations, action, options) => {
    if (action === 'add' && !options.imported) {
      const annot = annotations[0]
      annot.setCustomData('userId', annotationManager.getCurrentUser())
    }
  })

  const mapNames = (annotation) => {
    if(annotation.getCustomData('userId') === '1') {
      return 'Will Riker'
    } else if (annotation.getCustomData('userId') === '2') {
      return 'Jean-Luc Picard'
    }}

  annotationManager.setAnnotationDisplayAuthorMap(mapNames);
});

You can also set whether to use the display name as the author name in the XFDF whenever exporting the annotations, by passing the option useDisplayAuthor: true to exportAnnotations