Import form data into PDF

9 Jan 20265 minutes to read

The PDF Viewer provides APIs to import interactive form field values into the currently loaded PDF. You can import from the following formats:

Supported API:

  • importFormFields(sourceOrObject, format)

Note: When using the server-backed viewer, set serviceUrl before importing.

Import as FDF

<button id="importFdf">Import FDF</button>
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);

const viewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
  resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
});
viewer.appendTo('#pdfViewer');

document.getElementById('importFdf')!.addEventListener('click', () => {
  // The file for importing should be accessible at the given path or as a file stream depending on your integration
  viewer.importFormFields('File', FormFieldDataFormat.Fdf);
});

Import as XFDF

<button id="importXfdf">Import XFDF</button>
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);

const viewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
  resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
});
viewer.appendTo('#pdfViewer');

document.getElementById('importXfdf')!.addEventListener('click', () => {
  // The file for importing should be accessible at the given path or as a file stream depending on your integration
  viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
});

Import as JSON

<button id="importJson">Import JSON</button>
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);

const viewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
  resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
});
viewer.appendTo('#pdfViewer');

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

Import as Object

Import data previously exported with exportFormFieldsAsObject. Useful for client-side round trips without writing a file.

<button id="exportDataAsObject">Export Object</button>
<button id="importData">Import Data</button>
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);

const viewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
  resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
});
viewer.appendTo('#pdfViewer');

let exportedData: object | undefined;

document.getElementById('exportDataAsObject')!.addEventListener('click', () => {
  viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(value => {
    exportedData = value;
  });
});

document.getElementById('importData')!.addEventListener('click', () => {
  if (exportedData) {
    // Import the previously exported object data
    viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf);
  }
  // Alternatives:
  // viewer.importFormFields(exportedData, FormFieldDataFormat.Xfdf);
  // viewer.importFormFields(exportedData, FormFieldDataFormat.Json);
});

Common use cases

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

View Sample on GitHub

See also