vue里使用pdf.js实现pdf文件的预览功能

您所在的位置:网站首页 pdfjs预览pdf图片丢失 vue里使用pdf.js实现pdf文件的预览功能

vue里使用pdf.js实现pdf文件的预览功能

2023-04-14 00:08| 来源: 网络整理| 查看: 265

引言:经过上一篇文章的测试,发现了以下问题:

兼容性不好不适用多语言场景(不能共用一套)会出现跨域问题难于监控阅读状态不能控制下载状态

在基于vue开发的移动项目中,如果预览的pdf数量不是很多的话,是可以使用 vue-pdf 的,因为在实际开发测试中,ios系统依次预览多个pdf文件会出现白屏的现象,android系统不会出现。但是此时也很难监控阅读状态,所以最后采用pdf.js来实现业务需求。

目录: 实现效果1.下载pdfjs 2.放在项目中位置 3.在页面中使用 4.出现问题 5.更改源码 实现效果 1.下载pdfjs 官网: http://mozilla.github.io/pdf.js/getting_started/#download

下载位置

2.放在项目中位置 将下载下来的文件解压,放在项目的public目录下

在这里插入图片描述 为了减小打包体积,bulid文件夹中保留pdf.js和pdf.worker.js即可正常编译。

3.在页面中使用 在我的项目中,pdf文件是以url的形式提供的,我们在页面中放一个iframe,他的src属性等于到viewer.html的相对路径 '/pdfplugin/web/viewer.html?file=' ,file后拼接你的pdf的url就可以了。

代码实现:

export default {name: "myTestTwo",data(){return {url:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',src:''}},mounted() {this.getUrl();},methods :{getUrl:function () {this.src = '/pdfplugin/web/viewer.html?file=' + this.url}}}

效果展示: 在这里插入图片描述 通过结果可以看出,pdf.js真的是很强大,我们可以按照需求来更改源码,实现自己想要的效果。

4.出现问题 跨域问题:可参考这篇文章,推荐让后端小伙伴添加配置。当访问本地文件时,有可能会出现**Not allowed to load local resource**的问题,原因是谷歌浏览器禁止直接访问磁盘文件,在实际开发中,文件大多存在服务器中,如果个人想学习测试可以使用在线的pdf资源。在使用viewer.html相对路径时有可能找不到正确路径,我之前的路径是/public/pdfplugin/web/viewer.html?file=,发现怎么也找不到文件,后来去掉了一层/public,pdf就神奇的出来了。 5.更改源码(持续更新中)


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3