vue-pdf预览报错RenderingCancelledException：Rendering cancelled, page

最新推荐文章于 2024-06-27 16:30:19 发布

followly

最新推荐文章于 2024-06-27 16:30:19 发布

阅读量2k

点赞数 3

文章标签： pdf 前端 vue.js

本文链接：https://blog.csdn.net/followly/article/details/130082743

版权

文章讲述了在使用vue-pdf库时遇到的一个渲染问题，该问题是由于库本身的bug导致的。作者参考了GitHub上的讨论但未找到直接解决方案。最终，作者通过设置定时器动态渲染PDF页面的方式成功规避了这个问题。当用户点击查看多个PDF时，会先清空当前PDF信息，然后加载新的PDF文件，并利用定时器逐页加载，避免了错误发生。

摘要由CSDN通过智能技术生成

浏览了很多资料，这个其实是vue-pdf的bug，也看一个博主推荐git上大家讨论的 issues！但是没有实质性的解决方案！

后面尝试了来个偷天换日，给个定时器解决了！

showPdf(item) {
       // 因为可以点击在一个页面点击可选择多个pdf进行查看，所以每次调接口前先给pdf页面置空
      this.currentNum = null
      this.pageNum = null
      const params = {
        fileName: item
      }
      downloadPdfFile(params).then(res => {
        this.pdfUrl = window.URL.createObjectURL(res)
        const loadingTask = PDF.createLoadingTask(this.pdfUrl, CMapReaderFactory)
        loadingTask.promise
          .then((pdf) => {
            this.pageNum = pdf.numPages
            this.showPop = true
            // 用个定时器解决报错Rendering cancelled
            var timer = setInterval(() => {
              this.currentNum += 1
              if (this.currentNum === this.pageNum) {
                clearInterval(timer)
              }
            }, 500)
          })
          .catch(err => {
            console.error('pdf 加载失败', err)
          })
      })
    }