Submit PDF Form Data to a Server in Angular

24 Jul 20265 minutes to read

Overview

The Angular 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 Angular PDF Viewer installed and configured in your Angular 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 an Angular component with the PDF viewer and a Submit button that sends form data to /api/submit-form.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  AnnotationService,
  TextSelectionService,
  TextSearchService,
  FormFieldsService,
  FormDesignerService,
  PdfViewerComponent,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
        <div style="height: 640px">
            <div style="margin-bottom: 8px">
                <button (click)="handleSubmit()">Submit form data</button>
            </div>
            <ejs-pdfviewer
                #pdfViewer
                [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%"
            >
            </ejs-pdfviewer>
        </div>
    `,
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSelectionService,
    TextSearchService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  @ViewChild('pdfViewer') public pdfviewer: PdfViewerComponent;
  ngOnInit(): void {}
  sendToServer(formData: any): Promise<void> {
    // Adjust URL to your server endpoint
    return fetch('/api/submit-form', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    }).then((res) => {
      if (!res.ok) {
        throw new Error(`Server error ${res.status}`);
      }
    });
  }

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

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 the shape of the object.
  • WASM or resource errors: Ensure resourceUrl points to the correct Syncfusion 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.