vue-pdf 踩坑

使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮

vue3不支持vue-pdf，vue3项目用pdfjs-dist

安装依赖

npm i pdfjs-dist@2.5.207 --save

npm i vue-pdf@4.2.0 --save

引入组件

import pdf from 'vue-pdf'

export default {

  name: 'App',

  components: {

    pdf

  },

  ···

}

html使用

<pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf>

export default {

  ···

  data () {

    return {

      file: "/pdf/test.pdf",

      pageNum: undefined

    }

  },

  methods: {

    getPageNum () {

      let loadingTask = pdf.createLoadingTask(this.file)

      loadingTask.promise.then(pdf => {

        this.pageNum = pdf.numPages

      }).catch(err => {

        console.error('pdf加载失败', err);

      })

    }

  },

  mounted () {

    this.getPageNum()

  }

}

报错解决

这种情况是pdf还没加载出来就去渲染导致页面pageNum找不到，调用接口加载完成后再去渲染pageNum

报这个错误加上  {withCredentials: false} ，报错就没有了