vue-pdf组件多次切换文件进行预览会出现白屏

Question

vue-pdf组件多次切换文件进行预览会出现白屏，但是对应的页码正确，就是没有文字

        <pdf v-for="(i,index) in currentNum" :key="i" :src="pdfSrc" :page="i" style="width: 100%" ref="waybillRef"></pdf>


   //pdf加载
              let blob = window.URL.createObjectURL(
                  new Blob([res.data], {
                    type: 'application/pdf;charset=UTF-8',
                  })
              );
              this.pdfSrc = pdf.createLoadingTask(blob);
              this.pdfSrc.promise.then(pdf => {
                this.pageNum = pdf.numPages
                console.log(this.pageNum)
                // 用个定时器解决报错Rendering cancelled
                var timer = setInterval(() => {
                  this.currentNum += 1
                  if (this.currentNum === this.pageNum) {
                    clearInterval(timer)
                  }
                }, 500)
              }) .catch(err => {
                console.error('pdf 加载失败', err)
              })

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在使用 Vue-PDF 组件时遇到了一些问题。当用户快速切换 PDF 文件时，可能会遇到白屏的问题。这通常是由于渲染资源没有足够时间释放导致的。为了解决这个问题，可以尝试在每次切换 PDF 之前先卸载当前的 PDF 文件，并且在显示新 PDF 文件前等待一段时间。以下是修改后的代码示例：

首先，在你的 Vue 组件中添加一个 unmountPdf 方法，用于卸载当前正在显示的 PDF：

<template>
  <div>
    <pdf
      v-for="(i, index) in currentNum"
      :key="i"
      :src="pdfSrc"
      :page="i"
      style="width: 100%"
      ref="waybillRef"
    ></pdf>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfSrc: null,
      pageNum: 0,
      currentNum: 0,
      waybillRef: null,
    };
  },
  methods: {
    async loadPdf(blob) {
      this.unmountPdf();
      this.pdfSrc = pdf.createLoadingTask(blob);
      await this.pdfSrc.promise;
      this.pageNum = this.pdfSrc.pdf.numPages;
      this.currentNum = 1; // 开始时显示第一页
    },
    unmountPdf() {
      if (this.waybillRef && this.pdfSrc) {
        const { pdf } = this.pdfSrc;
        pdf.destroy();
        this.pdfSrc = null;
        this.$nextTick(() => {
          this.$refs.waybillRef.innerHTML = "";
        });
      }
    },
  },
};
</script>

然后，根据你的需求更新 PDF 源的逻辑：

// 在你的事件处理器（例如点击按钮）中调用这个方法来加载新的 PDF
loadNewPdf(newBlob) {
  this.unmountPdf();
  setTimeout(() => {
    this.loadPdf(newBlob);
  }, 200); // 等待一小段时间再加载新的 PDF，防止渲染冲突
},

这段代码做了以下几件事：

1. 添加了一个名为 unmountPdf 的方法，它会销毁当前的 PDF 和清除 DOM。
2. 更新了 loadPdf 方法，使其在加载新 PDF 之前先卸载旧的 PDF。
3. 当你需要加载新的 PDF 时，先调用 unmountPdf，然后使用 setTimeout 延迟加载新的 PDF。

这样应该能解决频繁切换 PDF 文件时出现的白屏问题。如果你还有其他问题或需要进一步的帮助，请随时告诉我。