pdfjs在线浏览PDF插件介绍及使

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秒左右,还是非常快速地,并且插件还支持其他功能,看起来效果更适合报刊的模式。效果图就不给大家放了。

提示

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




转载请注明:http://www.aierlanlan.com/rzfs/1622.html

  • 上一篇文章:
  •   
  • 下一篇文章: