Export PDF Form Data from JavaScript PDF Viewer

11 Aug 20266 minutes to read

The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:

Available methods

How to export

Use exportFormFields() with an optional destination path and the format type. If destination is omitted the browser prompts the user to download the exported file; when providing a server path, ensure the server is configured to accept and store uploaded files.

Export as FDF, XFDF, and JSON

The following example demonstrates exporting form field data in different formats and importing data back:

<!-- Action Buttons for Import and Export -->
<div style="margin-bottom: 12px; display: flex; gap: 8px;">
  <button id="importFdf">Import FDF</button>
  <button id="importXfdf">Import XFDF</button>
  <button id="importJson">Import JSON</button>
  <button id="exportFdf">Export FDF</button>
  <button id="exportXfdf">Export XFDF</button>
  <button id="exportJson">Export JSON</button>
</div>

<!-- PDF Viewer Container -->
<div id="PdfViewer" style="height: 640px; width: 100%"></div>
// Inject required modules
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.TextSearch,
    ej.pdfviewer.FormFields,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.PageOrganizer
);

// Initialize the viewer
var viewer = new ej.pdfviewer.PdfViewer();
viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
viewer.resourceUrl  = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
viewer.appendTo('#PdfViewer');

// Helper: open a native file picker, read the chosen file as text,
// then call viewer.importFormFields(stringData, format).
function importFile(format) {
    var input = document.createElement('input');
    input.type   = 'file';
    input.accept = '.' + format.toLowerCase(); // .fdf | .xfdf | .json
    input.onchange = function (e) {
        var file = e.target.files && e.target.files[0];
        if (!file) return;

        var reader = new FileReader();
        reader.onload = function (ev) {
            // ev.target.result is a STRING — what importFormFields actually wants
            viewer.importFormFields(ev.target.result, format);
        };
        reader.readAsText(file);
    };
    input.click();
}

// --- Import Form Fields ---
document.getElementById('importFdf').addEventListener('click', function () {
    importFile('Fdf');
});

document.getElementById('importXfdf').addEventListener('click', function () {
    importFile('Xfdf');
});

document.getElementById('importJson').addEventListener('click', function () {
    importFile('Json');
});

// --- Export Form Fields ---
document.getElementById('exportFdf').addEventListener('click', function () {
    viewer.exportFormFields('FormData', 'Fdf');   // downloads FormData.fdf
});

document.getElementById('exportXfdf').addEventListener('click', function () {
    viewer.exportFormFields('FormData', 'Xfdf');  // downloads FormData.xfdf
});

document.getElementById('exportJson').addEventListener('click', function () {
    viewer.exportFormFields('FormData', 'Json');  // downloads FormData.json
});

Export as Object

Use exportFormFieldsAsObject() to obtain form data as a JavaScript object for database or API integration.

<button id="exportObj">Export Object</button>
<button id="importObj">Import Object</button>
// ...same imports and viewer initialization as above...

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

  // Alternatives:
  // viewer.exportFormFieldsAsObject('Xfdf').then(...)
  // viewer.exportFormFieldsAsObject('Json').then(...)
});

// Import from previously exported object
document.getElementById('importObj').addEventListener('click', function () {
 viewer.importFormFields(exportedData, ej.pdfviewer.FormFieldDataFormat.Fdf);
});

Common Use Cases

  • Save user-entered data to your server without altering the original PDF.
  • Export as JSON for REST API integration.
  • Export as FDF/XFDF for compatibility with other PDF tools.
  • Export as Object to merge with app state or store securely.
  • Automate exports after validation using validateFormFields()

View Sample on GitHub

See also