前端pdf.js兼容火狐,ie,谷歌,加油

本文介绍了如何使用pdf.js在前端展示PDF文件,遇到的问题及解决方法,包括兼容火狐、IE和谷歌浏览器。通过注释掉viewer.js中特定代码解决了跨域问题,实现了PDF在不同浏览器的正常显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目要求实现出来的效果如下图

123

一开始尝试下载了pdfobject,结果不支持ie跟火狐(较低版本的),在搜看到下载了pdf.js插件

下载地址http://mozilla.github.io/pdf.js   解压你项目文件下(下载解压出来的文件目录,Git方式的会不同)

页面上使用文件流的形式来显示pdf(既在访问viewer.html时会自动取file参数的路由来获取文件),前端的代码如下

<iframe src="./pdfjs/web/viewer.html?file=XXX.pdf" frameborder="0"></iframe>

XXX.pdf为你本地的路径,可以正常显示

(1)pdf文件存在在本地项目中,没有涉及到跨域按上面方法直接上本地路劲是可以的

(2)要显示别的服务器上的pdf文件,(我涉及的那个项目的pdf是放在阿里云oss的)就会出现入下图所示的错误

(ps:找了很多很多很多的资料,试过php端的fpdf那个插件(tp)下载下来发现PHP版本不支持啥啥啥,一堆)

以下是我针对我的实际情况来解决的方法,仅供参考哦:

打开web/viewer.js文件,里面wo 找到下图这行注释掉throw即可(前提是你的访问的文件不存在跨域)(这个方法忘记是哪篇文章看到的了,sorry啦)

苦苦在百度,谷歌挣扎了很久就这么注释一下就解决了,成功兼容了ie,火狐,谷歌

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值