Print Controller >=1.5.0
printControl
Name | Description | Type |
---|---|---|
print | To initiate the print process. Accept an optional options object. If visibleDefaultProgress is set to true , it will display a default progress bar during the print preparation. | (options?: { visibleDefaultProgress: boolean }) => Awaited<void> |
cancel | To cancel the print operation if it is in progress. This can be useful for long processes where a user might want to abort printing. | () => void |
onProgress | (optional) A callback function that is triggered to provide updates on the progress of the printing preparation. It is called with a PreparePrintProgress object that contains information like the number of pages loaded and the current percentage of progress. | (progress: PreparePrintProgress) => void |
onComplete | (optional) A callback function that is triggered when the print preparation is completed successfully and the document is ready for printing. | () => void |
onError | (optional) A callback function that is triggered when an error occurs during the print preparation. It is called with an Error object that describes what went wrong. | (error: Error) => void |
PreparePrintProgress
Name | Description | Type |
---|---|---|
loadedPages | The number of pages that have been loaded and are ready for printing. | number |
totalPages | The total number of pages in the document that need to be prepared for printing. | number |
percentage | The percentage of the print preparation progress, calculated based on the number of loaded pages versus total pages. | number |
This setup allows you to have detailed control and feedback during the printing process, including progress tracking, error handling, and the ability to cancel.
Example
vue
<script setup lang="ts">
import { VPVInstance, VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch } from 'vue'
// Create a ref to hold the VPdfViewer component
const vpvRef = ref<VPVInstance | null>(null)
const printControl = computed(() => vpvRef.value?.printControl)
const print = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.print({ visibleDefaultProgress: true })
}
const cancelPrint = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.cancel()
}
watch(printControl, (printCtrl) => {
if (!printCtrl) return
printCtrl.onProgress = (progress) => {
console.log('Print progress', progress.percentage, progress.loadedPages)
}
printCtrl.onError = (error) => {
console.log('Print error', error)
cancelPrint()
}
printCtrl.onComplete = () => {
console.log('Print completed')
}
})
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="print">Print</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch } from 'vue'
// Create a ref to hold the VPdfViewer component
const vpvRef = ref(null)
const printControl = computed(() => vpvRef.value?.printControl)
const print = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.print({ visibleDefaultProgress: true })
}
const cancelPrint = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.cancel()
}
watch(printControl, (printCtrl) => {
if (!printCtrl) return
printCtrl.onProgress = (progress) => {
console.log('Print progress', progress.percentage, progress.loadedPages)
}
printCtrl.onError = (error) => {
console.log('Print error', error)
cancelPrint()
}
printCtrl.onComplete = () => {
console.log('Print completed')
}
})
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="print">Print</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>
vue
<script lang="ts">
import { VPVInstance, VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch, defineComponent } from 'vue'
export default defineComponent({
components: { VPdfViewer },
setup() {
// Create a ref to hold the VPdfViewer component
const vpvRef = ref<VPVInstance | null>(null)
const printControl = computed(() => vpvRef.value?.printControl)
const print = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.print({ visibleDefaultProgress: true })
}
const cancelPrint = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.cancel()
}
watch(printControl, (printCtrl) => {
if (!printCtrl) return
printCtrl.onProgress = (progress) => {
console.log('Print progress', progress.percentage, progress.loadedPages)
}
printCtrl.onError = (error) => {
console.log('Print error', error)
cancelPrint()
}
printCtrl.onComplete = () => {
console.log('Print completed')
}
})
return {
print,
vpvRef
}
}
})
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="print">Print</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent, watch } from 'vue'
export default {
components: { VPdfViewer },
setup() {
// Create a ref to hold the VPdfViewer component
const vpvRef = ref(null)
const printControl = computed(() => vpvRef.value?.printControl)
const print = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.print({ visibleDefaultProgress: true })
}
const cancelPrint = () => {
const printCtrl = unref(printControl)
if(!printCtrl) return
printCtrl.cancel()
}
watch(printControl, (printCtrl) => {
if (!printCtrl) return
printCtrl.onProgress = (progress) => {
console.log('Print progress', progress.percentage, progress.loadedPages)
}
printCtrl.onError = (error) => {
console.log('Print error', error)
cancelPrint()
}
printCtrl.onComplete = () => {
console.log('Print completed')
}
})
return {
print,
vpvRef
}
}
}
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="print">Print</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>