youzu_fan 2024-04-25 17:30 采纳率: 0%
浏览 115

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

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

img

  • 写回答

5条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-25 17:30
    关注

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

    看起来你在使用 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 文件时出现的白屏问题。如果你还有其他问题或需要进一步的帮助,请随时告诉我。

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 4月25日

悬赏问题

  • ¥15 关于#python#的问题,请各位专家解答!
  • ¥20 笔记本电脑 处理器是AMD的r7
  • ¥15 clash节点timeout
  • ¥15 需要在vitis下实现彩调视频图像累加,并输出
  • ¥15 解决不了的LNK2019错误
  • ¥20 MATLAB仿真三相桥式全控整流电路
  • ¥15 EDA技术关于时序电路设计
  • ¥15 百度文心一言流式返回sse失败
  • ¥15 由于远程方已关闭传输流,身份验证失败
  • ¥15 rt-detr,PCB,目标检测