Vue.js 使用vue pdf时变为空白

我想使用vue pdf预览联机pdf文件。但我总是得到空白页，控制台上并没有错误消息。我的代码是

<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 pdf”导入pdf
导出默认值{
名称：'Pdf'，
组成部分：{
pdf
},
数据（）{
返回{
src:“http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
}
},
安装的（）{
this.src=pdf.createLoadingTask（this.src）
this.src.then（响应=>{
this.numPages=response.numPages
})
}
}

vue版本：2.9.6

---

vue pdf版本：4.0.6

请勿重新分配变量

src

。您的onmounted函数正在将

src

重新分配给其他对象，只需将其更改为：-

  .....
  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
})
}

---

不要重新分配变量

src

。您的onmounted函数正在将

src

重新分配给其他对象，只需将其更改为：-

  .....
  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
})
}

---

不要重新分配

src

。删除不重新分配

src

。删除