pdf.js

Pdf.js插件是由Mozilla 主导推出的，具体的数据资料不多。下面还是说一下这个插件是做什么的吧！普通话的解释是主要是在线预览PDF文件，可以实现PDF文件秒开的效果。 是一个主要用于HTML5 平台上在线阅读PDF文档的插件。

pdf

说一下在开发过程中的实际情况吧！前段时间我们开发一个web的平台，主要是做曝光、维权、咨询的。类似于新浪的黑猫投诉平台。当然我们也有参考同行的网站，做了一次版本升级，新的版本上增加了一个周刊的功能，内容是PDF格式。原本没想要太复杂的功能，直接就是浏览器打开pdf文件就行。但是在测试时上传了一个26M的文件，在线上的打开效果极差，加载的速度非常慢，这里不要问我服务器是啥配置的（反正不高）。想办法解决这个问题吧！首先想到的就是使用Pdf.js插件在解决。下面说一下具体怎么解决的。

解决方法

首先，肯定是去官方网站下载文件代码包了，这里说一下啊，官方的稳定版本是通过github下载的，下载速度是真的不行啊。废了半天的劲是终于下载完成了。完成后如果在本地直接点开viewer.html文件，那么是直接console出来的错误。为什么呢？这个东西需要使用服务来打开的。通过本地开发环境来打开就是没有问题的啦。下面一起来看一下刚刚下载的资源代码包。

代码包目录结构

目录结构

build目录下

pdf.js文件是负责API解析

pdf.worker.js文件是负责核心解析

web目录下

cmaps、images、locale都是一些资源文件

debugger.js调试文件

viewer.css视图样式文件

viewer.js视图渲染文件

viewer.html视图文件（目录中未做截取，实际中已经将其位置做了调整）

实际应用

我们直接将目录放在服务器里面，通过查看viewer.js文件，我们可以看出是如何调用pdf路径数据的。看到这里就很简单了，我们直接写个javascript代码段获取一下页面中的pdf路径就可以了。而页面中的pdf路径数据是怎么来的，就不用多说了吧！这样在链接地址上就不会看起来太乱。同时，也在网络上看到了使用Get方式传递路径的，这个是不安全的一种做法。如果被非法利用，那么你的服务器就相当于一个傻子，给别人干活的傻子。

具体的javascript代码就不写了比较简单的一行代码，但是要记住一点，页面中存放PDF文件的路径一定要放在viewer.js之前，否则是无法正常获取到数据的。

应用效果

还是上面的26M的pdf文件，打开效果在3秒左右，还是非常快速地，并且插件还支持其他功能，看起来效果更适合报刊的模式。效果图就不给大家放了。

提示

这里大家要做好安全防护工作，避免成为不法分子的工具。