PDF Form Import and Export Events in Vue

4 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 event arguments such as ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, and ExportFailureEventArgs.

Import Events

importStart — Fires when an import begins.
importSuccess — Fires when form fields are successfully imported.
importFailed — Fires if the import fails.

Example: Handle Import Events

Composition API (~/src/App.vue)
<template>
  <div>
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      @importStart="onImportStart"
      @importSuccess="onImportSuccess"
      @importFailed="onImportFailed"
      style="height:640px"
    />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onImportStart(args) {
      console.log('Import started', args);
      // e.g. show spinner, validate inputs
    },
    onImportSuccess(args) {
      console.log('Import success', args);
      // e.g. hide spinner, show toast
    },
    onImportFailed(args) {
      console.error('Import failed', args);
      // e.g. show error dialog
    }
  }
};
</script>

Export Events

exportStart — Fires when an export begins.
exportSuccess — Fires when form fields are successfully exported.
exportFailed — Fires if the export fails.

Example: Handle Export Events

Composition API (~/src/App.vue)
<template>
  <div>
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      @exportStart="onExportStart"
      @exportSuccess="onExportSuccess"
      @exportFailed="onExportFailed"
      style="height:640px"
    />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onExportStart(args) {
      console.log('Export started', args);
      // e.g. disable export UI
    },
    onExportSuccess(args) {
      console.log('Export success', args);
      // e.g. enable UI, provide download link
    },
    onExportFailed(args) {
      console.error('Export failed', args);
      // e.g. re-enable UI, notify user
    }
  }
};
</script>

Key Notes

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

Search docs

Ask Syncfusion AI Assistant