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

相关推荐
只会cv的前端攻城狮2 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
万敏2 小时前
Vue3 全栈实战第二周:Pinia + Vite + Router + axios 完整记录
vue.js·node.js·全栈
OpenTiny社区2 小时前
TinyEngine 2.11版本发布:AI 进一步融入画布,Vue 工程可一键转DSL
前端·vue.js·github
Li Ming&4 小时前
Python办公自动化:利用Python批量将PDF转换为图片文件
python·pdf·pip
用户19883424362215 小时前
在vue中,abortController调用导致的内存泄漏问题
vue.js
ji_shuke6 小时前
Vue3 前端批量打印 PDF/图片踩坑记:跨域、合并打印、对话框闪退与按钮一直 loading
前端·pdf·状态模式·pdf打印
Am-Chestnuts6 小时前
Mermaid流程图怎么导出Word/PDF?DS随心转批量保存AI多轮修改与源码
pdf·aigc·word·流程图
FL16238631299 小时前
pdf批量转ofd本地离线操作简单支持win10及以上系统
pdf
HackTwoHub9 小时前
AntiDebug Mcp、AI逆向绕过前端,Hook 加密接口,抓取 Vue 路由漏洞,接入 MCP 让 AI 自动化挖掘前端漏洞
前端·vue.js·人工智能·安全·web安全·网络安全·系统安全
李明卫杭州9 小时前
还在用 Vue2 的 $set?一文吃透 Observable 响应式原理与 Vue3 的 Proxy 重构
vue.js