Some test text!

menu
Fill form fieldskeyboard_arrow_down

Filling PDF form fields

You can access and fill any form field by its field id:

WebViewer(...)
.then(instance => {
  const { docViewer, annotManager } = instance;

  docViewer.on('documentLoaded', () => {
    docViewer.getAnnotationsLoadedPromise().then(() => {
      const fieldManager = annotManager.getFieldManager();
      const field = fieldManager.getField(fieldId);
      field.setValue('new value');
    });
  });
});

linkIterate over all fields

You can also 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 { docViewer, annotManager } = instance;

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

linkListening for field changes

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

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

  annotManager.on('fieldChanged', (field, value) => {
    console.log(`Field changed: ${field.name}, ${value}`);
  });
});

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close