Fill PDF form fields in Javascript

This guide will walk you through how to programmatically fill out PDF form fields. You can also try it now with our form fill demo.

You can access and fill any form 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');
    });
  });
});

You can also iterate over all fields using the forEachField function of 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');
      });
    });
  });
});

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}`);
  });
});