Submit Form Data to a Server in React PDF Viewer

14 Aug 20266 minutes to read

Overview

The React PDF Viewer allows submitting filled form data like text fields, checkboxes, radio buttons and dropdown values to a back end server for processing. This guide shows how to extract form data from the viewer and post it as JSON to a server endpoint.

Prerequisites

  • EJ2 React PDF Viewer installed and configured in your React app
  • PDF contains interactive form fields
  • The viewer must be loaded before reading values
  • If posting cross-origin, ensure CORS is enabled on the server

Steps to send data

  1. Enable form designer in the viewer

    • Inject FormFields and FormDesigner services into the viewer so form APIs are available.

  2. Export form data from the viewer

  3. POST the exported JSON to your back end

    • Use fetch to send the JSON. The server must accept application/json and handle CORS if cross-domain.

  4. Trigger submission from a UI action

    • Call the export + POST flow from a button click or form submit handler.

Example

This full example shows a React component with the PDF viewer and a Submit button that sends form data to /api/submit-form.

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

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

    const sendToServer = async (formData: any) => {
        // Adjust URL to your server endpoint
        const res = await fetch('/api/submit-form', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        });
        if (!res.ok) {
            throw new Error(`Server error ${res.status}`);
        }
    };

    const handleSubmit = async () => {
        try {
            // exportFormFields returns a Promise resolving to form data object
            const formData = await viewerRef.current.exportFormFieldsAsObject();
            await sendToServer(formData);
            console.log('Form data submitted successfully.');
        } catch (err) {
            console.error(err);
            console.log('Submission failed: ' + (err as Error).message);
        }
    };

    return (
        <div style={{ height: '640px' }}>
            <div style={{ marginBottom: '8px' }}>
                <button onClick={handleSubmit}>Submit form data</button>
            </div>
            <PdfViewerComponent
                id="pdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}>
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                    BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print]} />
            </PdfViewerComponent>
        </div>
    );
}

Troubleshooting

  • No form values returned: Ensure the PDF has interactive fields and the viewer has finished loading before calling exportFormFieldsAsObject().
  • CORS errors: Enable CORS on the server or serve both frontend and back end from the same origin during testing.
  • Server rejects payload: Confirm the server expects application/json and validates shape of the object.
  • WASM or resource errors: Ensure resourceUrl points to the correct React PDF Viewer library files.

Use cases

  • Enable remote verification and approval workflows by sending submitted form data to a back end service for review and sign-off.
  • Store submitted form responses in a database to persist user inputs for auditing, reporting, or later retrieval.
  • Trigger workflow automation and downstream processing by sending form data to business systems or serverless functions.
  • Merge submitted values into a final flattened PDF on the server to produce a non-editable document that combines the form data with the original PDF.