How can I help you?
Export PDF Form Data from JavaScript PDF Viewer
12 Feb 20263 minutes to read
The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
- FDF
- XFDF
- JSON
- JavaScript Object (for custom persistence)
Available methods
-
exportFormFields(destination?, format)— Exports form field data to a file in the specified format; whendestinationis omitted the browser prompts for download. -
exportFormFieldsAsObject(format)— Returns a Promise that resolves to a JavaScript object containing the exported form data for custom handling. -
importFormFields(sourceOrObject, format)— Imports form data back into the PDF Viewer.
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
The following example exports form field data as FDF.
<button id="exportFdf">Export FDF</button>
<div id="pdfViewer" style="height: 640px; width: 100%"></div>document.getElementById('exportFdf').addEventListener('click', function () {
// Destination is optional; if omitted the browser will prompt.
viewer.exportFormFields('FormData','Fdf');
});Export as XFDF
The following example exports form field data as XFDF.
<button id="exportXfdf">Export XFDF</button>// ...same imports and viewer initialization as above...
document.getElementById('exportXfdf').addEventListener('click', function () {
viewer.exportFormFields('FormData', 'Xfdf');
});Export as JSON
The following example exports form field data as JSON.
<button id="exportJson">Export JSON</button>// ...same imports and viewer initialization as above...
document.getElementById('exportJson').addEventListener('click', function () {
viewer.exportFormFields('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>// ...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(...)
});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()