vue整合pdfjs,实现pdf文件预览
pdf格式的文件浏览器是可以直接打开的。所以只需要返回pdf文件的文件流,就可以直接预览文件,通过这种方式打开,整个页面全是pdf的文件内容。
最近修改公司vue项目中使用pdf.js来实现在线预览上传的各类文件.由于使用pdf.js在预览时是直接在标签内将src属性赋值为要请求的地址.这就导致一个问题,会直接请求服务器的文件路径地址,而这个服务器文件路径就会暴露出来。
安装 npm install pdfjs-dist --save 引入 let PDFJS = require(“pdfjs-dist”);PDFJS.GlobalWorkerOptions.workerSrc = require(“pdfjs-dist/build/pdf.worker.min”);完成。
如何创建pdf的buffer,让pdf.js实现预览pdf文件
pdf.js可通过pdf文件的地址或pdf数据流获取pdf,具体实现是调用接口函数 PDFJs.getDoc(url/buffer)将pdf载入html,通过canvas处理, 然后渲染pdf文件。
所以只需要返回pdf文件的文件流,就可以直接预览文件,通过这种方式打开,整个页面全是pdf的文件内容。需求是要求预览时,页面上要加上特定的标题格式,所以直接把文件流在浏览器打开的方式行不通。
将pdf流生成pdf文件,然后在将pdf文件使用PDF.js进行查看。你需要考虑浏览器兼容性,低版本浏览器可能没办法支持。
pdf.js预览文件必须只能是在服务器部署的项目路径下,不能通过修改配置的方式支持本地路径的文件,否则会有js跨域问题。
安装 npm install pdfjs-dist --save 引入 let PDFJS = require(“pdfjs-dist”);PDFJS.GlobalWorkerOptions.workerSrc = require(“pdfjs-dist/build/pdf.worker.min”);完成。
解决pdf.js无法完全显示pdf文件内容的问题
1、针对PDF文档显示不正常的问题,通常是由于缺少字体所造成的,对此我们可以通过百度搜索下载一款PDF编辑工具。
2、放大PDF文件,看看是否能够显示全部内容。 调整PDF文件中的文本框大小,使其能够容纳全部内容。 将PDF文件转换为其他格式,如Word或HTML,以便更好地查看和编辑内容。
3、PDF一般是图片扫描进去的,但也存在不同的字体,安装软件未必有该字体,那么就会显示不全,提示需要某个字体包才能正确显示此页面。单击确定将浏览器定向到从官网下载加载项。安装后重新打开。
4、网络延时导致。这是一个JavaScript库用来在html中动态嵌入PDF文档,使用标签,文件不显示是因为网络延时导致,建议切换网络重新连接即可。
5、不会占内存,很多人竞然问我,软件这么大会不会占内存?你说我如何说是好!一,软件一定要装好了;PDF文件一定要没问题;(也就是说这个PDF文件的内容是齐全的)。