Export PDF Form Data from Angular PDF Viewer

24 Jul 20265 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, ToolbarService, MagnificationService, NavigationService,
    AnnotationService, TextSelectionService, TextSearchService, FormFieldsService,
    FormDesignerService, PdfViewerModule, FormFieldDataFormat
} from '@syncfusion/ej2-angular-pdfviewer';
import { Component, ViewChild } from '@angular/core';

    2. Initialize reference

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

  • TS
    • @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;

    3. Export as FDF

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

  • TS
    • this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);

    4. Export as XFDF

    Use FormFieldDataFormat.Xfdf to export XFDF.

  • TS
    • this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);

    5. Export as JSON

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

  • TS
    • this.pdfviewer.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 this.pdfviewer.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 Angular app.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="control-section">
      <div style="margin-bottom: 12px">
        <button (click)="exportFdf()" id="exportFdf">Export FDF</button>
        <button (click)="exportXfdf()" id="exportXfdf">Export XFDF</button>
        <button (click)="exportJson()" id="exportJson">Export JSON</button>
        <button (click)="exportObj()" id="exportObj">Export Object</button>
      </div>
      <ejs-pdfviewer #pdfViewer id="container"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        style="height: 680px; width: 100%"></ejs-pdfviewer>
    </div>
  `,
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSelectionService,
    TextSearchService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;

  exportedData: object | undefined;

  exportFdf(): void {
    this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
  }

  exportXfdf(): void {
    this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
  }

  exportJson(): void {
    this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
  }

  exportObj(): void {
    this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
      this.exportedData = data;
      console.log('Exported object:', this.exportedData);
    });
  }
}

    Troubleshooting

    • Ensure FormFieldsService and FormDesignerService 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.

    View Sample on GitHub

    See also