Print events in Vue PDF Viewer
25 Jun 20265 minutes to read
This page lists each event emitted by the Vue PDF Viewer’s Print feature, the argument schema, and the minimal behavior notes needed for implementation.
Events
| Name | Description |
|---|---|
printStart |
Raised when a print action begins. Use the event to log activity or cancel printing. |
printEnd |
Raised after a print action completes. Use the event to notify users or clean up resources. |
printStart
This event is emitted when printing is initiated by toolbar or through programmatic API. Use to validate prerequisites, record analytics, or cancel printing.
Arguments - (PrintStartEventArgs):
-
fileName- The document file name being printed. -
cancel- Default:false. Set totrueto cancel the print operation.
Setting args.cancel = true prevents the client-side print flow; for server-backed printing it prevents the service request that produces print output. Find the code example here
Minimal usage example:
<template>
<div id="app">
<ejs-pdfviewer
id="pdfviewer"
:documentPath="documentPath"
:resourceUrl="resourceUrl"
@printStart="onPrintStart"
style="height: 100vh"
>
</ejs-pdfviewer>
</div>
</template>
<script>
import {
PdfViewerComponent,
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
Annotation,
ThumbnailView,
Print,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';
export default {
name: 'App',
components: {
'ejs-pdfviewer': PdfViewerComponent,
},
data() {
return {
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl:
'https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib',
};
},
methods: {
onPrintStart(args) {
console.log('Print action has started for file: ' + args.fileName);
},
},
provide: {
PdfViewer: [
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
Annotation,
ThumbnailView,
Print,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer,
],
},
};
</script>printEnd
This event is emitted after the printing completes. Use to finalize analytics, clear temporary state, or notify users.
Arguments - (PrintEndEventArgs):
-
fileName- The printed document name.
Minimal usage example:
<template>
<div id="app">
<ejs-pdfviewer
id="pdfviewer"
:documentPath="documentPath"
:resourceUrl="resourceUrl"
@printEnd="onPrintEnd"
style="height: 100vh"
>
</ejs-pdfviewer>
</div>
</template>
<script>
import {
PdfViewerComponent,
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
Annotation,
ThumbnailView,
Print,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';
export default {
name: 'App',
components: {
'ejs-pdfviewer': PdfViewerComponent,
},
data() {
return {
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl:
'https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib',
};
},
methods: {
onPrintEnd(args) {
console.log('Printed file name: ' + args.fileName);
},
},
provide: {
PdfViewer: [
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
Annotation,
ThumbnailView,
Print,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer,
],
},
};
</script>