在线阅读PDF文件js插件——pdf.js
最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能。
首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobject,用来一下,在PC端运行还可以,但是在移动端用手机的浏览器就不好用了
原因是它要求在客户端安装Adobe Reader,所以再找啊找,找到了pdf.js,它是Mozilla实验室开发的一款在线阅读PDF插件,废话少说,直接干!
下载地址:https://github.com/dunitian/PDFJSDemo
目录结构:
PDF:存放PDF文件 pdfjs:核心文件 index.html:入口文件 Demo.html:通过file参数传递文件名显示不同的文件
我们在本地打开index.html文件,然后我们看到这样的一句话:
看来在本地是行不通的了,那么我们就把他放到我们的服务器上。
看到链接地址直接跳到web目录下的viewer.html文件,我就顺藤摸瓜,找到该目录下,发现了view.js文件中
Default_url 就是默认打开额url地址 修改它就可以查看其它的pdf文件
讲到这里,功能已经基本实现了,经过测试也能在移动端兼容,但是昨天在我的iphone中测试时发现了另一个问题
百度了一下,
问题是由于服务器对http的get请求进行了数据的部分响应,导致pdf无法继续打开。尝试了很多方法,修改请求头等方式都不成功;
最后,通过查询pdf.js中的compatibility.js发现它里面对disableRange和disableStream进行了判断。唯独没有对IOS系统做判断,所以导致了以上请求问题;
借鉴github中大牛们的解决方式,成功解决了以上问题。
方式如下:
1、在compatibility.js中添加对ios系统的判断;
var isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(navigator.userAgent);
2、在判断中添加此项
if (isSafari || isOldAndroid || isChromeWithRangeBug || isIOS) {
PDFJS.disableRange = true;
PDFJS.disableStream = true;
}
3、保存即可;
注:以上是对常用的浏览器和移动端系统做了判断,如别的浏览器或者系统,可根据实际情况进行扩展。
然后就照着它的修改
然后打开页面就正常了
昨天折腾了两个小时,最后说插件的用户体验不好,改成图片的格式,晕,好吧,不过也是学习了一下~
另附Demo.html用法:
https://yq.aliyun.com/articles/40197