在线预览插件pdf.js使用记录

最近想做一个在线预览的功能,就找到了这个基于pdf.js插件,毕竟它是基于html5和js写出来的,相较于靠flash的其他插件,就不用多说了。下面就说下,使用过程写的demo中,遇到的问题。

插件下载地址如下:http://mozilla.github.io/pdf.js/getting_started/#download

看一下下图,down下pdf.js之后,我们解压文件看到如下图中的目录:
这里写图片描述
看到上面web目录下有个viewer.html,我们打开它,看到了一个官方的demo实现。我们只需要将它的代码复制到我们的项目中,然后进行修改即可。

然后,建立我的项目,并把相关的js复制到项目中:
这里写图片描述
其中,testPdfjs.jsp为我的测试页面。
这里写图片描述
如果想改动访问的pdf路径,可以寻找viewer.js文件中DEFAULT_URL进行修改

项目启动之后访问遇到的问题:

  • js找不到:
    这里写图片描述

  • pdf找不到:
    这里写图片描述

针对上面遇到的问题,根据浏览器F12的控制台,我们轻易的看到问题出在哪里!注意到它请求文件的路径,便可以轻易解决问题。我们的项目是8080/ReviewServlet/xxxxx,但是请求是直接从8080/下面请求的,所以出现了问题。

解决办法:

一、如果是发现 pdf.worker.js找不到,如果是在eclipse启动的项目,需要改动eclipse的工作空间下面org.eclipse.wst.server.core下你创建的相应server的temp(x)目录,将最开始的pdf.js中zip解压出来的build文件复制到webapps下面,问题就得以解决。
这里写图片描述

二、如果是直接将war部署到tomcat上面,也同样是将build文件复制到webapps下面即可:
这里写图片描述
三、关于pdf的路径问题,如下图即可:
这里写图片描述

最后我们解决完以上遇到的问题之后,再次运行项目,然后访问相应的页面:
这里写图片描述

如此结束了初次体验,后续再针对pdf.js,可以把相关文档转换成pdf再用此插件预览或者其他业务相关操作。

posted on 2017-12-22 21:52  菜码农先生  阅读(209)  评论(0编辑  收藏  举报