VUE PDF VIEWER

Print Controller >=1.5.0 ​

printControl ​

NameDescriptionType
printTo 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>
cancelTo 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 ​

NameDescriptionType
loadedPagesThe number of pages that have been loaded and are ready for printing.number
totalPagesThe total number of pages in the document that need to be prepared for printing.number
percentageThe 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 { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch } from 'vue'

// Create a ref to hold the VPdfViewer component
const vpvRef = ref<InstanceType<typeof VPdfViewer>>()

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">
    <div>
      <button @click="print">Print</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
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">
    <div>
      <button @click="print">Print</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
vue
<script lang="ts">
import { 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<InstanceType<typeof VPdfViewer>>()
    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">
    <div>
      <button @click="print">Print</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
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">
    <div>
      <button @click="print">Print</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}