HelpBot Assistant

How can I help you?

Export PDF Form Data from React PDF Viewer

10 Mar 20266 minutes to read

This guide shows concise, actionable steps to export PDF form field data for storage or integration. It covers:

Steps

1. Configure the PDF Viewer

Install and import the viewer with required services.

  • TS
    • import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
    ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject, Print, FormFieldDataFormat
} from '@syncfusion/ej2-react-pdfviewer';
import { RefObject, useRef } from 'react';

    2. Initialize ref

    Initialize the viewer with a ref so you can call export methods.

  • TS
    • const viewerRef: RefObject<PdfViewerComponent> = useRef(null);

    3. Export as FDF

    Use exportFormFields(destination?, FormFieldDataFormat.Fdf) to download an FDF file.

  • TS
    • viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Fdf);

    4. Export as XFDF

    Use FormFieldDataFormat.Xfdf to export XFDF.

  • TS
    • viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);

    5. Export as JSON

    Use FormFieldDataFormat.Json to export form data as a JSON file.

  • TS
    • viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);

    6. Export as a JavaScript object

    Use exportFormFieldsAsObject(format) to get data for API calls or storing in a database.

  • TS
    • const data = await viewerRef.current?.exportFormFieldsAsObject();

    Complete example

    The example below provides a single page with buttons to export in all supported formats. It uses the same imports shown above and is ready to run in a typical React app.

    import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
    ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject, Print, FormFieldDataFormat
} from '@syncfusion/ej2-react-pdfviewer';
import { RefObject, useRef } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent> = useRef(null);

    const onExportFdf = () => {
        viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Fdf);
    };

    const onExportXfdf = () => {
        viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
    };

    const onExportJson = () => {
        viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);
    };

    const onExportObject = async () => {
        const data = await viewerRef.current?.exportFormFieldsAsObject();
        console.log('Exported object:', data);
    };

    return (
        <div className='control-section'>
            <div style={{ marginBottom: 12 }}>
                <button onClick={onExportFdf} id="exportFdf">Export FDF</button>
                <button onClick={onExportXfdf} id="exportXfdf">Export XFDF</button>
                <button onClick={onExportJson} id="exportJson">Export JSON</button>
                <button onClick={onExportObject} id="exportObj">Export Object</button>
            </div>
            <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={{ height: '680px' }}
            >
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner, TextSearch, PageOrganizer, Print]} />
            </PdfViewerComponent>
        </div>
    );
}

    View Sample on GitHub

    Troubleshooting

    • Ensure FormFields and FormDesigner services are injected when using form APIs.
    • Confirm resourceUrl points to the matching ej2-pdfviewer-lib version.
    • If exports fail in restrictive browsers, check popup/download settings and CORS for hosted endpoints.
    • For server-side persistence, use exportFormFieldsAsObject() and send the result to your API.

    See also