Syncfusion AI Assistant

How can I help you?

PDF Form Import and Export Events in Angular

3 Feb 20265 minutes to read

Import/Export events let you track and customize the entire life cycle of form data being imported into or exported from the PDF Viewer.
Use these events to:

  • Validate inputs before processing.
  • Show progress indicators.
  • Log audit trails.
  • Block operations based on business rules.

Each event provides detailed context through typed event arguments such as ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, and ExportFailureEventArgs.

Import Events

Example: Handle Import Events

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        (importStart)="onImportStart($event)"
        (importSuccess)="onImportSuccess($event)"
        (importFailed)="onImportFailed($event)"
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSelectionService,
    TextSearchService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent {
  public document = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

  onImportStart(args: any): void {
    console.log('Import started', args);
    // e.g. show spinner, validate inputs
  }

  onImportSuccess(args: any): void {
    console.log('Import success', args);
    // e.g. hide spinner, show toast
  }

  onImportFailed(args: any): void {
    console.error('Import failed', args);
    // e.g. show error dialog
  }
}

Export Events

Example: Handle Export Events

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        (exportStart)="onExportStart($event)"
        (exportSuccess)="onExportSuccess($event)"
        (exportFailed)="onExportFailed($event)"
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSelectionService,
    TextSearchService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent {
  public document = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';

  onExportStart(args: any): void {
    console.log('Export started', args);
    // e.g. disable export UI
  }

  onExportSuccess(args: any): void {
    console.log('Export success', args);
    // e.g. enable UI, provide download link
  }

  onExportFailed(args: any): void {
    console.error('Export failed', args);
    // e.g. re-enable UI, notify user
  }
}

Key Notes

  • importStart, importSuccess, importFailed cover the full import life cycle.
  • exportStart, exportSuccess, exportFailed cover the full export life cycle.

See also