Get blank while using vue-pdf

Question

I want to use vue-pdf to preview online pdf file. But I always got blank page and there is no error message on console. My code is

<template>
<div class="pdf">
  <pdf 
    :src="src">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
          src:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
      }
  },
  mounted() {
    this.src = pdf.createLoadingTask(this.src)
    this.src.then(response => {
      this.numPages = response.numPages
    })
  }
}

</script>

vue version: 2.9.6 vue-pdf version: 4.0.6

Answer 1

Do not re-assign variable src . Your onmounted function is re-assigning src to something else just change it to:-

  .....
  data(){
  return {
      src:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
      newsrc: null,
  }
 },
 .................
 ........your code..............
 ........................
mounted() {
  this.newsrc = pdf.createLoadingTask(this.src)
  this.newsrc.then(response => {
    this.numPages = response.numPages
})
}