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

Create fillable forms

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

You can iterate over all fields using the forEachField function of FieldManager.

Note that you'll need to wait for the annotationsLoadedPromise to resolve to ensure that the fields are accessible in the FieldManager.
WebViewer(...)
.then(instance => {
  const { documentViewer, annotationManager } = instance.Core;

  documentViewer.addEventListener('documentLoaded', () => {
    documentViewer.getAnnotationsLoadedPromise().then(() => {
      // iterate over fields
      const fieldManager = annotationManager.getFieldManager();
      fieldManager.forEachField(field => {
        console.log(field.getValue());
        field.setValue('new value');
      });
    });
  });
});

Access fields by id

You can access any field by its field id:

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

  documentViewer.addEventListener('documentLoaded', () => {
    documentViewer.getAnnotationsLoadedPromise().then(() => {
      const fieldManager = annotationManager.getFieldManager();
      const field = fieldManager.getField(fieldId);
      field.setValue('new value');
    });
  });
});

Listen for field changes

The fieldChanged event is fired any time the value of a form field changes.

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

  annotationManager.addEventListener('fieldChanged', (field, value) => {
    console.log('Field changed: ' + field.name + ', ' + value);
  });
});

Modify fields to readonly

The following code sets all fields to readonly when the document is loaded. The annotationChanged event is triggered when the annotations are added to the document and checking the action and e.imported ensures that they changed because of an import into the document and not because of a user modification.

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

  annotationManager.addEventListener('annotationChanged', (annotations, action, e) => {
    // if the annotation change occurs because of an import then
    // these are fields from inside the document
    if (action === 'add' && info.imported) {
      annotations.forEach((annot) => {
        if (annot instanceof Annotations.WidgetAnnotation) {
          annot.fieldFlags.set('ReadOnly',
      });
    }
  });
});