最近接到一个需求大致是这样的,要求在移动端和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

在线阅读PDF文件js插件——pdf.js的更多相关文章

  1. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  2. js插件---bootstrap-datepicker.js是什么

    js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...

  3. js插件---video.js如何使用

    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...

  4. 史上最强php生成pdf文件,html转pdf文件方法

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. 怎么编辑PDF文件内容,PDF文件编辑方法

    怎样编辑PDF文件内容?这是一个常常困扰我们的问题,工作当中我们经常会收到PDF格式的文件,但有时的文件内容不是我们想要的或者是觉得不合理的需要改掉.但是每次有这样的问题时都没有什么好的解决方法,每次 ...

  6. 如何修改PDF文件内容,PDF怎么添加背景

    很多的情况下,大家都会遇到PDF文件,不管是在学习中还是在工作中,对于PDF文件,文件的修改编辑是需要用到PDF编辑软件的,在编辑文件的时候,发现文件的页面是有背景颜色的,又该如何修改背景颜色呢,不会 ...

  7. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  8. SpringBoot在线预览PDF文件(引用pdf.js工具)

    本项目Demo使用了PDF.js插件实现PDF在线阅读功能PDF.js插件下载地址 实测能用! 1.创建SpringBoot项目,目录结构如下: 2.进行项目配置: pom.xml: <proj ...

  9. laravel项目中手机浏览器在线阅读pdf文件-->PDFJS插件

    第一步:下载链接:http://mozilla.github.io/pdf.js/getting_started/#download 第二步:将下载的文件放在项目中. 第三步:在项目中想要预览的地方给 ...

随机推荐

  1. DLL 导出变量

    声明为导出变量时,同样有两种方法:   第一种是用__declspec进行导出声明 #ifndef _DLL_SAMPLE_H #define _DLL_SAMPLE_H // 如果定义了C++编译器 ...

  2. 网易云直播SDK使用总结

    前言: 最近公司的项目中加入中直播这部分的功能,现在的直播平台真的很多很多,以前在朋友圈看到过这张图片,没办法一次性给大家看,就只能这样截成几张给大家看看.其实按照我自己的看法,现在的直播已经没办法做 ...

  3. 从C#到TypeScript - Generator

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  4. Spring+SpringMVC+MyBatis+easyUI整合基础篇(一)项目简介

    很久之前就打算开始写一下自己的技术博客了,实在抽不出时间所以计划一直搁置了,最近项目进度渐渐缓了下来,不那么忙了,也因此开始筹备自己的博客.说到这次博客的主角,也是无心插柳找到的,来源于两年前自己写的 ...

  5. 使用EntityFramework中DbSet.Set(Type entityType)方法碰到的问题

    使用的是EntityFramework, Version=6.0.0.0,项目原本直接使用将EntityFramework的Entity拿到UI使用,后面想使用dto对象将数据库的Entity与前台分 ...

  6. ZOJ 1492 Maximum Clique 搜索最大团

    ZOJ1492 题意:给一个无向图 求最大团的大小.节点数小于50 数据有限,考虑记忆化搜索,方程很好给出. 令 Si={vi,vi+1.....vn} mc[i]表示Si最大团的大小,倒着推算. 必 ...

  7. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  8. jQuery给CheckBox全选与不全选

    $(function(){ $("#checkAll").click(function() {//全选 $('input[name="DATA"]').prop ...

  9. javaSE复习总结

    之前匆匆忙忙学完了java,后来又接着学习ee,然而,越是想要快一点最后反而会更慢一点.因为匆忙间 我几乎什么都没学会.在后面的学习中实在非常吃力.就把javase 的视频大部分又重新看了一遍.真的收 ...

  10. python之SQLAlchemy ORM 上

    前言: SQLAlchmey是暑假学的,当时学完后也没及时写博客整理下.这篇博客主要介绍下SQLAlchemy及基本操作,写完后有空做个堡垒机小项目.下篇博客整理写篇关于Web框架和django基础~ ...