[置顶] 网页中使用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页面中的，所以我使用了<iframe>标签，使得页面嵌在网页中。似乎完成了需求啊，可是突然发现有两点问题没有解决。

1.      使用了<iframe>标签后发现全屏按钮消失了，全屏用不了

2.      如果文件路径是一个绝对路径或者是网络路径怎么办，能不能把pdf文件以流的形式写入response中呢？

 

然后又开始不停百度，看论坛，然后自己思考，还是解决了这两个问题，现在依次说一下解决方案。

 

全屏显示

 

Pdf.js会通过检测当前环境是否支持全屏来决定是否展示全屏按钮。

 


似乎是在iframe中，所以该方法得出的结果是不允许全屏，所以不展示全屏按钮。因此我们需要将下面这段判断去掉。



然后在自己实现该全屏按钮的点击事件，将pdf全屏展示。展示的方法应该有很多种，在这就不说了。

 

 

绝对路径读取文件

 

由于我要读取的文件在服务器上的共享盘下，并不在tomcat服务器的项目目录下，因此需要通过绝对路径去读取文件。解决方案是将前面pdf.js中file参数从原来的相对路径地址换成一个网络请求，在服务器端将目标pdf以流的形式返回到response中进行输出展示。

 

一开始我换成的请求路径是：

http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html?file=/项目名称/controller请求路径?fileUrl = 文件的绝对路径

 

但是后来发现get请求中的fileUrl参数并不能传进去，因为在file前面有个问号。然后查看源码，找到了请求的地址。



在这个方法中 前台传递的file参数被赋值，因此我想到的解决方案是将请求路径改成

http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html?file=/项目名称/controller请求路径&fileUrl = 文件的绝对路径（存在中文记得转码和解码）

 

 就是将fileUrl前的问号替换成& 这样fileUrl以后被当成参数传递。

然后将之前的js代码改成如下



这样后台controller的代码便能收到fileUrl这个参数，服务器端返回流的代码就不展示了。