h5使用pdf.js预览pdf文件

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

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

    

下载稳定版本

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



发现可以加载默认的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

 

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

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