使用vue-pdf时留空

时间:2019-05-27 14:04:23

标签: vue.js

我想使用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版本:2.9.6 vue-pdf版本:4.0.6

1 个答案:

答案 0 :(得分:0)

不要重新分配变量 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
})
}