HelpBot Assistant

How can I help you?

Import PDF Form Data into JavaScript PDF Viewer

17 Feb 20262 minutes to read

The PDF Viewer lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:

API to use

  • importFormFields(sourceOrObject, format) — Imports form data into the currently loaded PDF. The sourceOrObject parameter accepts a file path or URL, a file stream, or a JavaScript object; the format parameter accepts FDF, XFDF, or JSON.

NOTE

For server-backed viewers, set serviceUrl before importing. The method triggers import events (importStart, importSuccess, importFailed); see the import/export events page for recommended handling.

Import FDF

<button id="importFdf">Import FDF</button>
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
document.getElementById('importFdf').addEventListener('click', function () {
  // The file for importing should be accessible at the given path or as a file stream depending on your integration
  viewer.importFormFields('File', 'Fdf');
});

Import XFDF

<button id="importXfdf">Import XFDF</button>
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
document.getElementById('importXfdf').addEventListener('click', function () {
  // The file for importing should be accessible at the given path or as a file stream depending on your integration
  viewer.importFormFields('File', 'Xfdf');
});

Import JSON

<button id="importJson">Import JSON</button>
document.getElementById('importJson').addEventListener('click', function () {
  // The file for importing should be accessible at the given path or as a file stream depending on your integration
  viewer.importFormFields('File', 'Json');
});

Common Use Cases

  • Pre-fill application forms from a database using JSON.
  • Migrate data from other PDF tools using FDF/XFDF.
  • Restore user progress saved locally or on the server.
  • Combine with validation to block print/download until required fields are completed.

View Sample on GitHub

See also