Foxit Developer

Form data handling ​

Form data handling is a key part of the SDK. It covers exporting data from PDF forms, filling forms with data, and exporting data to other formats. This topic explains how to use these features.

Data export ​

Foxit PDF SDK for Web can export form data from a PDF to supported file formats:

  • xfdf (XML Forms Data Format)
  • fdf (Forms Data Format)
  • csv (Comma-Separated Values)
  • json (JavaScript Object Notation)
  • text (Plain Text)
  • xml (Extensible Markup Language)

The following example uses exportToFile:

js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();
const blob = await form.exportToFile(PDFViewCtrl.commons.FileFormat.json, {});

In this example, PDFViewCtrl.commons.FileFormat specifies the export format. With no properties in the second argument, all form data is exported.

To export specific fields, set fieldNames and isExcludeFields:

js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();
const blob = await form.exportToFile(PDFViewCtrl.commons.FileFormat.json, {
    fieldNames: ['Text Field0', 'Check Box0'],
    isExcludeFields: true
});

With isExcludeFields set to true, Text Field0 and Check Box0 are excluded and the remaining fields are exported. To export only Text Field0 and Check Box0, omit isExcludeFields or set it to false:

js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();
const blob = await form.exportToFile(PDFViewCtrl.commons.FileFormat.json, {
    fieldNames: ['Text Field0', 'Check Box0']
});

Data import ​

Foxit PDF SDK for Web can import data from supported file formats into a PDF form. The following example uses importFromFile:

js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();

const response = await fetch('formData.xfdf');
const xfdfData = await response.blob();
await form.importFromFile(xfdfData, PDFViewCtrl.commons.FileFormat.xfdf);

This loads data from an XFDF file and imports it into the currently open PDF form.

For csv or text data, confirm the delimiter used in the file. Set the delimiter parameter as needed; by default, csv uses , and text uses \n.

js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();

const response = await fetch('formData.csv');
const csvData = await response.blob();
await form.importFromFile(csvData, PDFViewCtrl.commons.FileFormat.csv, {
    delimiter: ','
});
js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();

const response = await fetch('formData.txt');
const textData = await response.blob();
await form.importFromFile(textData, PDFViewCtrl.commons.FileFormat.text, {
    delimiter: '\n'
});

Reset form ​

Foxit PDF SDK for Web provides PDFForm.resetForm to reset field values to their defaults.

PDFForm.resetForm definition:

typescript
async resetForm(fieldNames: string[], isExclude: boolean = false): Promise<void>;

Parameters:

  1. fieldNames: Names of fields to reset. If empty, all fields are reset.
  2. isExclude: Whether to exclude fields listed in fieldNames. Default is true, meaning fields in fieldNames are not reset. When set to false, only fields in fieldNames are reset.

To reset specific fields, pass their names in fieldNames and set isExclude to false:

js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();
await form.resetForm(
    ['Text Field0', 'Combo Box0'],
    false
)

To reset all fields, pass an empty array for fieldNames and set isExclude to true:

js
const doc = pdfViewer.getCurrentPDFDoc();
const form = doc.getPDFForm();
await form.resetForm([], true);