Download Controller >=1.8.0

downloadControl

Name	Description	Type
download	To initiate the download process.	() => Awaited<void>
getBlob	To get Blob of the current file	() => Promise<{ blob: Blob; filename: string }>
onComplete	(optional) A callback function that is triggered when the download is completed successfully and the PDF file is downloaded.	() => void
onError	(optional) A callback function that is triggered when an error occurs during the download process. It is called with an Error object that describes what went wrong.	(error: Error) => void

Example

Composition TS

<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch, unref } from 'vue'

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

const downloadControl = computed(() => vpvRef.value?.downloadControl)

const downloadFile = () => {
  const downloadCtrl = unref(downloadControl)
  if(!downloadCtrl) return
  downloadCtrl.download()
}

const save = () => {
  const downloadCtrl = unref(downloadControl)
  if (!downloadCtrl) return
  downloadCtrl.getBlob().then((result) => {
    console.log('save result', result)
    const link = document.createElement('a')
    link.href = URL.createObjectURL(result.blob)
    link.download = result.filename
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(link.href)
    // or save to server
  })
}

watch(downloadControl, (downloadCtrl) => {
  if (!downloadCtrl) return
  downloadCtrl.onError = (error) => {
    console.log('Download error', error)
  }
  downloadCtrl.onComplete = () => {
    console.log('Download completed')
  }
})
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="downloadFile">Download</button>
    </div>
    <div>
      <button @click="save">Save from blob</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%;
  }
}
</style>

Composition JS

<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch, unref } from 'vue'

// Create a ref to hold the VPdfViewer component
const vpvRef = ref(null)

const downloadControl = computed(() => vpvRef.value?.downloadControl)

const downloadFile = () => {
  const downloadCtrl = unref(downloadControl)
  if(!downloadCtrl) return
  downloadCtrl.download()
}

const save = () => {
  const downloadCtrl = unref(downloadControl)
  if (!downloadCtrl) return
  downloadCtrl.getBlob().then((result) => {
    console.log('save result', result)
    const link = document.createElement('a')
    link.href = URL.createObjectURL(result.blob)
    link.download = result.filename
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(link.href)
    // or save to server
  })
}

watch(downloadControl, (downloadCtrl) => {
  if (!downloadCtrl) return
  downloadCtrl.onError = (error) => {
    console.log('Download error', error)
  }
  downloadCtrl.onComplete = () => {
    console.log('Download completed')
  }
})
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="downloadFile">Download</button>
    </div>
    <div>
      <button @click="save">Save from blob</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%;
  }
}
</style>

Options TS

<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch, defineComponent, unref } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const downloadControl = computed(() => vpvRef.value?.downloadControl)

    const downloadFile = () => {
      const downloadCtrl = unref(downloadControl)
      if(!downloadCtrl) return
      downloadCtrl.download()
    }

    const save = () => {
      const downloadCtrl = unref(downloadControl)
      if (!downloadCtrl) return
      downloadCtrl.getBlob().then((result) => {
        console.log('save result', result)
        const link = document.createElement('a')
        link.href = URL.createObjectURL(result.blob)
        link.download = result.filename
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(link.href)
        // or save to server
      })
    }

    watch(downloadControl, (downloadCtrl) => {
      if (!downloadCtrl) return
      downloadCtrl.onError = (error) => {
        console.log('Download error', error)
      }
      downloadCtrl.onComplete = () => {
        console.log('Download completed')
      }
    })

    return {
      downloadFile,
      vpvRef,
      save
    }
  }
})
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="downloadFile">Download</button>
    </div>
    <div>
      <button @click="save">Save from blob</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%;
  }
}
</style>

Options JS

<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent, watch, unref } from 'vue'

export default {
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref(null)

    const downloadControl = computed(() => vpvRef.value?.downloadControl)

    const downloadFile = () => {
      const printCtrl = unref(printControl)
      if(!downloadCtrl) return
      downloadCtrl.download()
    }

    const save = () => {
      const downloadCtrl = unref(downloadControl)
      if (!downloadCtrl) return
      downloadCtrl.getBlob().then((result) => {
        console.log('save result', result)
        const link = document.createElement('a')
        link.href = URL.createObjectURL(result.blob)
        link.download = result.filename
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(link.href)
        // or save to server
      })
    }

    watch(downloadControl, (downloadCtrl) => {
      if (!printCtrl) return
      downloadCtrl.onError = (error) => {
        console.log('Download error', error)
      }
      downloadCtrl.onComplete = () => {
        console.log('Download completed')
      }
    })

    return {
      downloadFile,
      vpvRef,
      save
    }
  }
}
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="downloadFile">Download</button>
    </div>
    <div>
      <button @click="save">Save from blob</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%;
  }
}
</style>