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

在线预览插件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再用此插件预览或者其他业务相关操作。