解决vue-pdf-embed文件预览内容展示不全问题

最近在工作中,维护文件预览的功能时,发现部分文件的内容展示不全。起初怀疑是后端返回的base64 内容有缺失,于是抓紧数据之后,单独用ifarme去创建展示这段base64。结果文件又能正常展示
之后断点调试程序时,发现插件中给出了一个警告信息

Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.  VuePdfEmbed

 翻译之后的意思就是

image

 那现在就大概知道是因为什么原因导致的文件内容展示不全了,那就很好解决了,加字体文件就行。

打开插件开源地址,发现 VuePdfEmbed 底层使用的 pdf.js ,所以可能就是因为缺少对应的字符映射表(CMap),导致字体加载失败,从而文字内容显示不全或直接缺失。

同时文档中也介绍了关于这个问题的源码配置方法

image

 因此,直接去pdfjs-dist中找对应的资源包,因为觉得最新版的资源包中,对应的字体文件包最完整,因此直接下载了最新版V5.5.207版本

image

 PS:如果是外网项目,可以直接配置CDN地址,因为这个存在问题的项目存在内网的局限性,所以需要把资源包下载放到项目仓库中,如果担心网络问题导致链接CDN访问无效,也可以考虑下载资源包至文件之后,将资源包部署在项目服务器上

  因为我是放到项目仓库中,所以选择放在public文件中,那对应的配置路径为 /cmaps

 配置完成之后,开始调试,文件还是不能显示(项目中vue-pdf-embed插件版本为1.2.1, 但是对应的资源包版本为最新版5.5.207),因此怀疑是因为版本差异太大,导致的版本不兼容,因此找到1.2.1版本对应的兼容的资源包版本就可以了,因为考虑项目中对于这个插件的使用仅仅只是预览文件,所以直接一步到位, 将插件升级到了最新版本,之后再次调试,文件就可以正常显示了

 

posted @ 2026-03-13 14:26  收破烂的小伙子  阅读(1)  评论(0)    收藏  举报