解决pdf.js无法完全显示pdf文件内容的问题

JavaScript020

解决pdf.js无法完全显示pdf文件内容的问题,第1张

一、遇到的问题 :预览pdf文件时,很多内容未显示。****

查看控制台,出现以下警告

二、跟踪源码,排查原因

从下图可以发现baseUrl取值为params.cMapUrl

找到调用WorkerTransport方法处:

该问题的原因是因为缺少了部分字体包,也可使用CDN方式加载字体包。

此处提供cmaps的2个CDN地址(2.2.228为pdfjs-dist的版本号):

https://unpkg.com/browse/pdfjs-dist@2.2.228/cmaps/

https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/

加载字体包后,效果如下图(部分内容已打马赛克):

项目上要求实现pdf文件格式的预览。

pdf格式的文件浏览器是可以直接打开的。所以只需要返回pdf文件的文件流,就可以直接预览文件,通过这种方式打开,整个页面全是pdf的文件内容。需求是要求预览时,页面上要加上特定的标题格式,所以直接把文件流在浏览器打开的方式行不通。通过收集相关资料,找到pdfjs插件以支持文件的预览。

我的博客即将同步至腾讯云+社区,邀请大家一同入驻: https://cloud.tencent.com/developer/support-plan?invite_code=1jernsajfpuge

将pdf流生成pdf文件,然后在将pdf文件使用PDF.js进行查看。你需要考虑浏览器兼容性,低版本浏览器可能没办法支持。参照 File API 和URL API(URL.createObjectURL())