Syncfusion AI Assistant

How can I help you?

Import/Export events in Angular PDF Viewer

6 Apr 20264 minutes to read

Import/export events let developers monitor and control annotation data as it flows into and out of the PDF Viewer. These events enable validation, progress reporting, audit logging, and conditional blocking of import/export operations.

Common use cases:

  • Progress UI and user feedback
  • Validation and sanitization of imported annotation data
  • Audit logging and telemetry
  • Blocking or altering operations based on business rules

Each event exposes typed event-args: ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, and ExportFailureEventArgs that describe the operation context.

Import events

  • importStart: Triggers when an import operation starts.
  • importSuccess: Triggers when annotations are successfully imported.
  • importFailed: Triggers when importing annotations fails.

Handle import events

Example: handle import events by wiring event bindings on the Angular PDF Viewer component.

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

@Component({
  selector: 'app-root',
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService, TextSelectionService],
  template: `
    <ejs-pdfviewer
      id="pdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height: 650px"
      (importStart)="onImportStart($event)"
      (importSuccess)="onImportSuccess($event)"
      (importFailed)="onImportFailed($event)">
    </ejs-pdfviewer>
  `
})
export class AppComponent {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  onImportStart(args: any): void {
    console.log('Import started', args);
  }

  onImportSuccess(args: any): void {
    console.log('Import success', args);
  }

  onImportFailed(args: any): void {
    console.error('Import failed', args);
  }
}

Export events

  • exportStart: Triggers when an export operation starts.
  • exportSuccess: Triggers when annotations are successfully exported.
  • exportFailed: Triggers when exporting annotations fails.

Handle export events

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

@Component({
  selector: 'app-root',
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService, TextSelectionService],
  template: `
    <ejs-pdfviewer
      id="pdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height: 650px"
      (exportStart)="onExportStart($event)"
      (exportSuccess)="onExportSuccess($event)"
      (exportFailed)="onExportFailed($event)">
    </ejs-pdfviewer>
  `
})
export class AppComponent {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  onExportStart(args: any): void {
    console.log('Export started', args);
  }

  onExportSuccess(args: any): void {
    console.log('Export success', args);
  }

  onExportFailed(args: any): void {
    console.error('Export failed', args);
  }
}

NOTE

importStart, importSuccess, and importFailed cover the lifecycle of annotation imports; exportStart, exportSuccess, and exportFailed cover the lifecycle of annotation exports.

See also