网页中使用pdf.js展示pdf文件，全屏问题以及绝对路径如何读取

PDF展示

 

Web项目 其中有个需求是在网页中内嵌一个pdf展示,通过一侧展示出来的文件树的点击事件，展示不同的pdf文件，同时还要支持pdf的放大缩小旋转全屏等功能。

起初想了几种方案：

1.      将pdf文件转换成tiff文件（icepdf），公司有可以展示tiff的插件，能满足各种需求，但是在pdf转tiff过程中在服务器上出现字重的情况，一直没找出原因，最终放弃。

2.      上网需要各种插件。

最早先用的是pdfObject.js根据官网上的例子写了个demo 发现似乎不能旋转。本以为能解决这个需求了，空欢喜一场（不过在写这篇文章的时候，突然发现别写的例子好像可以旋转，不过我已经解决了 hhh 下次好好研究一下）

 

继续找，发现了pdf.js这么个神器，欣喜若狂啊，现在开始讲pdf.js在项目中的运用。

Pdf.js的官网地址

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

 

对js的技术不是特别熟悉 看到这篇博客学会的安装

 

http://www.cnblogs.com/kagome2014/p/kagome2014001.html

 

下载后的文件目录

 

由于项目中用的是tomcat服务器，然后把构建出来的文件放在tomact的webapp/plugins下，如下：

启动tomcat服务器时，访问http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html（xxx是项目名称）

 

能够看到页面

 

这是pdf.js的默认读取文件的地址。若想修改默认读取的文件地址，则修改generic/web/viewer.js文件中的DEFAULT_URL的值。

 

接下来，如何让pdf.js读取我们自己的文件。在pdf.js的请求头里面加上file参数即可。例如在web文件夹下创建了a目录，在里面放入b.pdf文件。读取的路径就是

http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html?file=/a/b.pdf

         (可以通过相对路径去找到文件的位置)

由于需求是嵌在web页面中的，所以我使用了