Export form data from PDF in JavaScript

14 Jan 20265 minutes to read

The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats:

FDF
XFDF
JSON

Export as FDF

Using the exportFormFields method, the form field data can be exported in the specified data format. This method accepts two parameters:

The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
The second parameter should be the format type of the form data.

The following example exports and imports form field data as FDF.

<button id="exportFdf">Export FDF</button>

// Ensure the EJ2 PDF Viewer scripts are loaded in your page.
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.LinkAnnotation,
  ej.pdfviewer.ThumbnailView,
  ej.pdfviewer.BookmarkView,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner
);

var viewer = new ej.pdfviewer.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('exportFdf').addEventListener('click', function () {
  // Data must be the desired path or file name for the exported document.
  viewer.exportFormFields('ExportedData', ej.pdfviewer.FormFieldDataFormat.Fdf);
});

Export as XFDF

The following example exports form field data as XFDF.

<button id="exportXfdf">Export XFDF</button>

// Ensure the EJ2 PDF Viewer scripts are loaded in your page.
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.LinkAnnotation,
  ej.pdfviewer.ThumbnailView,
  ej.pdfviewer.BookmarkView,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner
);

var viewer = new ej.pdfviewer.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('exportXfdf').addEventListener('click', function () {
  // Data must be the desired path or file name for the exported document.
  viewer.exportFormFields('FormData', ej.pdfviewer.FormFieldDataFormat.Xfdf);
});

Export as JSON

The following example exports form field data as JSON.

<button id="exportJson">Export JSON</button>

// Ensure the EJ2 PDF Viewer scripts are loaded in your page.
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.LinkAnnotation,
  ej.pdfviewer.ThumbnailView,
  ej.pdfviewer.BookmarkView,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner
);

var viewer = new ej.pdfviewer.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('exportJson').addEventListener('click', function () {
  // Data must be the desired path or file name for the exported document.
  viewer.exportFormFields('FormData', ej.pdfviewer.FormFieldDataFormat.Json);
});

Export as Object

Export the form data to a JavaScript object for custom persistence (database, API, or client storage).
The following example exports and imports form field data as Object.

<button id="exportObj">Export Object</button>

// Ensure the EJ2 PDF Viewer scripts are loaded in your page.
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.LinkAnnotation,
  ej.pdfviewer.ThumbnailView,
  ej.pdfviewer.BookmarkView,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner
);

var viewer = new ej.pdfviewer.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');

var exportedData;
document.getElementById('exportObj').addEventListener('click', function () {
  viewer.exportFormFieldsAsObject(ej.pdfviewer.FormFieldDataFormat.Fdf).then(function (data) {
    exportedData = data; // Save or send to server
    console.log('Exported object:', exportedData);
  });

  // Alternative formats:
  // viewer.exportFormFieldsAsObject(ej.pdfviewer.FormFieldDataFormat.Xfdf).then(...)
  // viewer.exportFormFieldsAsObject(ej.pdfviewer.FormFieldDataFormat.Json).then(...)
});

Common use cases

Persist user-entered data to your server without modifying the original PDF.
Export as JSON for easy integration with REST APIs.
Export as FDF/XFDF for interoperability with other PDF tools.
Export as object to combine with your app state and store securely.
Automate exports after validation using validateFormFields.

View Sample on GitHub

Search docs

Ask HelpBot