Import PDF Form Data into Angular PDF Viewer

24 Jul 20264 minutes to read

This guide shows how to import form field values into an already loaded PDF in the EJ2 Angular PDF Viewer. Supported import formats: FDF, XFDF, JSON, and importing from a JavaScript object.

Steps to import data

  1. Import the viewer, inject FormFieldsService / FormDesignerService, and create a @ViewChild to call importFormFields.

  2. Call importFormFields(data, format) where format is one of FormFieldDataFormat.Fdf, FormFieldDataFormat.Xfdf, or FormFieldDataFormat.Json. data may be a file path (for server/file-based imports), a base64 string, or a JavaScript object mapping field names to values.

  3. Verify the form fields are populated after the import completes. For server-backed imports, ensure serviceUrl is configured and the import file is accessible by the server.

Example

The example below provides a minimal Angular app with four buttons to import FDF, XFDF, JSON, or an object. Replace the import file identifiers ('File') with your file path or implement a file upload to pass a Blob/stream.

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)="importFdf()" style="margin-right: 8px">Import FDF</button>
        <button (click)="importXfdf()" style="margin-right: 8px">Import XFDF</button>
        <button (click)="importJson()" style="margin-right: 8px">Import JSON</button>
        <button (click)="importFromObject()">Import from 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-filling-document.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

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

  // The file for importing should be accessible at the given path or as a base 64 string depending on your integration
  importFdf(): void {
    this.pdfviewer.importFormFields('File', FormFieldDataFormat.Fdf as any);
  }

  importXfdf(): void {
    this.pdfviewer.importFormFields('File', FormFieldDataFormat.Xfdf as any);
  }

  importJson(): void {
    this.pdfviewer.importFormFields('File', FormFieldDataFormat.Json as any);
  }

  // Import from a JavaScript object (fieldName: value)
  importFromObject(): void {
    const formDataObject = {
      'fullname': 'Jane Doe',
      'email': '[email protected]',
      'agreeTerms': 'yes'
    };
    this.pdfviewer.importFormFields(JSON.stringify(formDataObject), FormFieldDataFormat.Json as any);
  }
}

Expected result: The loaded PDF’s interactive form fields are populated with the values from the imported file/object. For object imports, fields matching the object keys receive the provided values.

Troubleshooting

  • If imports do not populate fields, confirm the field names in the source match the PDF form field names.
  • For file-based imports, ensure you use server mode and that the import file is accessible to the viewer.
  • If using a Blob, pass the encoded base64 string of Blob/stream instead of the string 'File'.
  • Check browser console for network errors when the viewer attempts to fetch import files.

View Sample on GitHub

See also