pdf.js+Viewer.js 改动源码进阶传参预览PDF附件

现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件。但是不同的浏览器显示的页面不一样。如果我们想在网页上统一预览pdf怎样实现呢?

Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。使用方法:

  1. PDF.js 可以在官网上下载:http://mozilla.github.io/pdf.js/
  2. 解压到目录pdf,再把整个目录拷贝到网站的public目录下。解压后是这样的:
  3. 我们可以使用pdf.js自带的预览界面viewer.html,只需传入pdf文件的url即可。
    如果要打开一个pdf文件,直接这样写就可以了:
<a href="/pdf/web/viewer.html?file=file.pdf">Open</a>

如果想在弹窗打开:

window.open('/pdf/web/viewer.html?file=file.pdf','PDF','width:50%;height:50%;top:100;left:100;');

此时预览pdf文件是没有任何问题的但是当你传递一个参数就会报错,因为viewer.js会帮你过滤掉 ? 后面的参数,此时需要在源码中改动:
pdf.js+Viewer.js 改动源码进阶传参预览PDF附件_第1张图片
在viewer.js中找到这个函数。他把url重新组成了一下。但是他只获取到文件名,?号后面的参数需要自己拼接,然后自己循环拼接一下即可,就可以预览了。

你可能感兴趣的:(前端,javascript)