Export PDF Form Data from React PDF Viewer

25 Feb 20269 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 data to a file in the specified format.
exportFormFieldsAsObject(format) — Exports data as a JavaScript object for custom handling.
importFormFields(sourceOrObject, format) — Import data back into the PDF.

How to export

Use exportFormFields() with an optional destination path and the format type.

Export as FDF

The example below exports form field data as FDF.

index.js
import * as ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = useRef(null);

  const onExportFdf = () => {
    // Data must be the desired path or file name for the exported document.
    viewerRef.current?.exportFormFields('ExportedData', FormFieldDataFormat.Fdf);
  };

  return (
    <div className='control-section'>
      <button onClick={onExportFdf} id="exportFdf">Export FDF</button>
      <PdfViewerComponent
        ref={viewerRef}
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
        style=
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Export as XFDF

The example below exports form field data as XFDF.

index.js
import * as ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = useRef(null);

  const onExportXfdf = () => {
    // Data must be the desired path or file name for the exported document.
    viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
  };

  return (
    <div className='control-section'>
      <button onClick={onExportXfdf} id="exportXfdf">Export XFDF</button>
      <PdfViewerComponent
        ref={viewerRef}
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
        style=
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Export as JSON

The example below exports form field data as JSON.

index.js
import * as ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = useRef(null);

  const onExportJson = () => {
    // Data must be the desired path or file name for the exported document.
    viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);
  };

  return (
    <div className='control-section'>
      <button onClick={onExportJson} id="exportJson">Export JSON</button>
      <PdfViewerComponent
        ref={viewerRef}
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
        style=
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Export as Object

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

index.js
import * as ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = useRef(null);

  const onExportObject = async () => {
    const data = await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Fdf);
    // Save or send to server
    console.log('Exported object:', data);

    // Alternative formats:
    // await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf);
    // await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Json);
  };

  return (
    <div className='control-section'>
      <button onClick={onExportObject} id="exportObj">Export Object</button>
      <PdfViewerComponent
        ref={viewerRef}
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
        style=
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

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

Search docs

Ask HelpBot