Syncfusion AI Assistant

How can I help you?

Export PDF Form Data from Angular PDF Viewer

7 Apr 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