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

最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能。

首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobject,用来一下,在PC端运行还可以,但是在移动端用手机的浏览器就不好用了

原因是它要求在客户端安装Adobe Reader,所以再找啊找,找到了pdf.js,它是Mozilla公司开发的一款在线阅读PDF插件,废话少说,直接干!

下载地址:https://github.com/dunitian/PDFJSDemo

目录结构:

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

PDF:存放PDF文件    pdfjs:核心文件       index.html:入口文件  Demo.html:通过file参数传递文件名显示不同的文件

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

我们在本地打开index.html文件,然后我们看到这样的一句话:

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

看来在本地是行不通的了,那么我们就把他放到我们的服务器上。

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

看到链接地址直接跳到web目录下的viewer.html文件,我就顺藤摸瓜,找到该目录下,发现了view.js文件中

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

Default_url 就是默认打开额url地址 修改它就可以查看其它的pdf文件

讲到这里,功能已经基本实现了,经过测试也能在移动端兼容,但是昨天在我的iphone中测试时发现了另一个问题

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

百度了一下,

问题是由于服务器对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、保存即可;

注:以上是对常用的浏览器和移动端系统做了判断,如别的浏览器或者系统,可根据实际情况进行扩展。

然后就照着它的修改

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

然后打开页面就正常了

昨天折腾了两个小时,最后说插件的用户体验不好,改成图片的格式,晕,好吧,不过也是学习了一下~

另附Demo.html用法:

https://yq.aliyun.com/articles/40197

上一篇:Alpha版本发布时间安排


下一篇:pdf.js pdfdom.js使用(转)