h5使用pdf.js预览pdf文件

一.下载pdf.js
     官网地址:

     http://mozilla.github.io/pdf.js/


    h5使用pdf.js预览pdf文件

下载稳定版本

       h5使用pdf.js预览pdf文件
解压以后会看到如下文件,将整个文件夹部署到服务端,这里我们先用本地服务进行测试,为了方便我们在hbuilder里测试一下


h5使用pdf.js预览pdf文件
发现可以加载默认的pdf

h5使用pdf.js预览pdf文件
 

那么怎么显示我们自己的pdf呢

需要在url上加上自己文件的路径

http://127.0.0.1:8020/new/web/viewer.html?file=../test/test.pdf

也可以是绝对路径

http://127.0.0.1:8020/new/web/viewer.html?file=http://127.0.0.1:8020/new/test/test.pdf
h5使用pdf.js预览pdf文件

 

三.修改title,
本地测试完毕,将文件夹部署到测试服务器

在手机端测试一下,开始我们打开pdf时直接跳到这url,发现页面的title不是我们的pdf文件名,然后我们打开代码,根据我们的url对如下代码做了适当调整
h5使用pdf.js预览pdf文件
发现部分手机还会偶发设置不成功,由于我们是混合开发,可以调用原生设置 title的方法,最后我们吧url嵌套到一个iframe中,在iframe中打开这个url,调用原生设置title的方法,设置成功h5使用pdf.js预览pdf文件

h5使用pdf.js预览pdf文件

上一篇:flume收集日志无法在HDFS上存储


下一篇:【Maven实战技巧】「插件使用专题」Maven-Assembly插件实现自定义打包