HelpBot Assistant

How can I help you?

Import/Export events in React PDF Viewer

3 Mar 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 props on PdfViewerComponent.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Inject, Toolbar, Annotation, TextSelection } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      style={{ height: '650px' }}
      importStart={(args) => { console.log('Import started', args); }}
      importSuccess={(args) => { console.log('Import success', args); }}
      importFailed={(args) => { console.error('Import failed', args); }}
    >
      <Inject services={[Toolbar, Annotation, TextSelection]} />
    </PdfViewerComponent>
  );
}

ReactDOM.createRoot(document.getElementById('sample')).render(<App />);

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 * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Inject, Toolbar, Annotation, TextSelection } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      style={{ height: '650px' }}
      exportStart={(args) => { console.log('Export started', args); }}
      exportSuccess={(args) => { console.log('Export success', args); }}
      exportFailed={(args) => { console.error('Export failed', args); }}
    >
      <Inject services={[Toolbar, Annotation, TextSelection]} />
    </PdfViewerComponent>
  );
}

ReactDOM.createRoot(document.getElementById('sample')).render(<App />);

NOTE

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

See also