在线阅读PDF文件js插件——pdf.js

在线阅读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