Export PDF Form Data from Angular PDF Viewer

2 Feb 20268 minutes to read

The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:

• FDF
• XFDF
• JSON
• JavaScript Object (for custom persistence)

Available methods

• exportFormFields(destination?, format) — Exports data to a file in the specified format.
• exportFormFieldsAsObject(format) — Exports data as a JavaScript object for custom handling.
• importFormFields(sourceOrObject, format) — Import data back into the PDF.

How to export

Use exportFormFields() with an optional destination path and the format type.

Export as FDF

The following example exports form field data as FDF.

Standalone

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <button (click)="exportFdf()">Export FDF</button>
      <ejs-pdfviewer #pdfViewer id="pdfViewer"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        style="height: 640px; 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-filling-document.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

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

  exportFdf(): void {
    // Destination is optional; if omitted the browser will prompt.
    this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
  }
}

Export as XFDF

The following example exports form field data as XFDF.

Standalone

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <button (click)="exportXfdf()">Export XFDF</button>
      <ejs-pdfviewer #pdfViewer id="pdfViewer"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        style="height: 640px; 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-filling-document.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

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

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

Export as JSON

The following example exports form field data as JSON.

Standalone

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <button (click)="exportJson()">Export JSON</button>
      <ejs-pdfviewer #pdfViewer id="pdfViewer"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        style="height: 640px; 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-filling-document.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

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

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

Export as Object

Use exportFormFieldsAsObject() to obtain form data as a JavaScript object for database or API integration.

Standalone

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <button (click)="exportObj()">Export Object</button>
      <ejs-pdfviewer #pdfViewer id="pdfViewer"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        style="height: 640px; 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-filling-document.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

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

  exportedData: object | undefined;

  exportObj(): void {
    this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
      this.exportedData = data; // Persist or send to server
      console.log('Exported object:', this.exportedData);
    });
    // Alternatives:
    // this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
    // this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
  }
}

Common Use Cases

• Save user-entered data to your server without altering the original PDF.
• Export as JSON for REST API integration.
• Export as FDF/XFDF for compatibility with other PDF tools.
• Export as Object to merge with app state or store securely.
• Automate exports after validation using validateFormFields()

View Sample on GitHub

See also

• Form Designer overview
• Form Designer Toolbar
• Import form fields
• Import Export Events
• Create form fields
• Group form fields
• Form validation
• Add custom data to form fields
• Form fields API