pdf预览空白问题解决。第一次预览正常,再重新打开就空白的问题。是因为cmaps没有更新

文章目录

问题描述

我用的是pdfjs作为PDF预览工具使用。

预览有电子签章的PDF后(如下图的水印、签章),再重新预览没有电子签章的PDF,就会空白。

如上图,第一个PDF的接口加载了电子签章的字体,但是当我点击第二个PDF时,就出现预览空白,原因是因为它沿用了前面PDFcmaps文件。

看网络面板,可以排除是接口的问题,因为在预览PDF时,是重新获取了PDF文件流的。

所以,问题就出在重新加载新的PDF文件流时,有缓存,没有更新bcmaps文件导致。

问题解决

最开始我尝试用特殊的方法去解决bcmaps缓存的问题,但是都无效。

包括问了各个AI,也无济于事。

后面我发现用这些预览时,其实都是用的是同一个组件。

所以,就应该销毁PDF预览组件,让其第二次打开时,重新构建,不依赖之前的缓存即可。

最终添加了一行很简单的代码来解决了。

html 复制代码
<el-dialog
      width="80%"
      title="文件预览"
      v-loading="loading"
      :visible.sync="dialogPdfViewVisible"
      append-to-body
    >
      <pdf-view
        v-if="dialogPdfViewVisible"  //这里就是我添加的  v-if即可
        :pdf-data="pdfViewData"
        data-type="base64"
        :total="true"
        :visible="true"
        custom-class="canvasdiffer"
      />
    </el-dialog>

问题总结

出了问题,如果能通过刷新页面就能解决问题,那么就是缓存问题。想办法让其不缓存即可解决。

曾经参考过的文章(也未能解决)

https://blog.csdn.net/weixin_42530606/article/details/136152608

https://blog.csdn.net/weixin_44998124/article/details/120889121

相关推荐
独泪了无痕1 分钟前
Vue3中防御XSS攻击的“特效药”-DOMPurify
前端·vue.js·安全
云水一下24 分钟前
Vue.js从零到精通系列(五):全局状态管理——Pinia 核心与实践
前端·javascript·vue.js
老马聊技术1 小时前
AI对话功能之SpringBoot整合Vue3
vue.js·人工智能·spring boot·后端
英勇无比的消炎药2 小时前
一站式汇总TinyVue工具案例与真实落地经验
vue.js·前端框架
梵得儿SHI4 小时前
Vue 项目实战与性能优化全攻略:从代码、渲染到首屏,一站式解决卡顿慢加载
前端·vue.js·性能优化·vite·前端面试·前端优化·首屏优化
开开心心就好5 小时前
解决截图被拦截黑屏问题的免费小工具
安全·智能手机·flink·kafka·pdf·音视频·1024程序员节
一 乐6 小时前
幼儿园管理系统|基于springboot + vue幼儿园管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·幼儿园管理系统
软件工程小施同学6 小时前
CCF A区块链论文分享-NDSS 2026(2)-CtPhishCapture:揭露针对加密货币钱包的基于凭证窃取的网络钓鱼诈骗(附pdf)
网络·pdf·区块链
云水一下6 小时前
Vue.js从零到精通系列(七):高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
前端·vue.js·typescript
2601_961845156 小时前
2026法考资料pdf|电子版|资料已整理
开发语言·前端框架·pdf·c#·xhtml·csrf·view design