pdf.js的使用（1）站在巨人的肩膀上纯干货分享，没有华丽的词藻

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

请耐着性子看完再上手，不难的，全实战干货分享，超详细教程，所见即所得（pc端和移动端都可以！！！亲测超给力）

以下是我在实际项目开发中的过程分享前端是:vue+jsp

1.首先下载pdf.js（怎么下可以去百度），实在不会就私我，我发给你

1.1展示一哈我下载下来的pdf.js的目录结构

1.2接下来可以直接打开viewer.html在浏览器里看看效果，整个页面样式还是非常美观的而且是纯js写的，真心佩服老外

关于页面的样式你也可以完全自己写不用他的，我实力不允许啊（哭笑！！！）

这个打开的是它默认的xxxxxKey-pldi-09.pdf文件看源码在viewer.js里面的5153行（这个行号可能会有些差异）自己去找找看,如果以后要加什么功能基本也是在viewer.js文件里

好了如果你进行到这一步就可以教你怎么调用这个pdf查看器了

2.然后把pdf.js放入你的项目里面（就是把整个pdfJs文件夹拷贝到你的项目静态资源文件下面,可以把locale文件夹里面除了中英文的东西删了）

2.1 开始调用方式（一）

<%--方式一直接在你要写的html页面用iframe标签嵌入插件的viewer.html页面 file 参数就是pdf文件的路径--%>

<%--<iframe id="pdf" width="100%" height="800" src="${sysHostUrl }/static/js/pdfJs/web/viewer.html?file=Vue.js.pdf&downloadFlag=false"></iframe>--%>

//或者从远程服务器去获取pdf文件如：

注意：用这种方式调用的话会报一个错

file origin does not match viewer's 这应该是跨域问题

<iframe src="/static/js/pdfJs/web/viewer.html?file=http://ip地址:9999/file/2020/5/13/20200513170332512.pdf"></iframe>

解决方法：在viewer.js文件里面搜索 file origin does not match viewer's 把这个条件注释掉就ok了

题外话：我在手机端用这种方式是不会报这个错的

window.onload = function() {
//打开一个新的窗体
window.open("js/pdfJs/web/viewer.html?file=http://ip地址:9999/file/2020/5/13/20200513170332512.pdf");
}

2.2 开始调用方式（二）（重点！重点！重点！）

//获取流文件的方式预览pdf文件

//var pdfUrl="/webApi/downPDF.do?ArchiveDetailUUID="+uuid+"&number="+Math.random();//这是后台接口获取流（根据需要换成你自己的接口哦！）

window.location.href = "/static/js/pdfJs/web/viewer.html?file=/webApi/downPDF.do?ArchiveDetailUUID="+297e82ec6ec57a1e016ec57fdfc90000+"&number="+Math.random()+"&local="+'${curLang}'+"&downloadFlag=false;

说明:我们在实际应用中，可能会根据不同的参数，来选择展示不同的pdf文件，此时就涉及到传参的问题了，仔细观察上面这段url地址会发现，在file请求参数中的值为一个url地址，而这个url地址又追加了自己的请求参数，这就导致一个url地址中出现2个"?"导致浏览器不能正常解析这段url！
所以需要用到js中的encodeURIComponent()来进行编码，然后viewer.js里会自动对编码的内容进行解码，

window.location.href = "/static/js/pdfJs/web/viewer.html?file=" + encodeURIComponent(pdfUrl)+"&local="+'${curLang}'+"&downloadFlag=false;

downloadFlag=false 这个参数是我用来控制viewer.html的打印，下载，上传按钮的(如果viewer.html页面上有不要的控件可以通过这种方式来隐藏，我尝试过把不需要的按钮直接在viewer.html删除掉，发现不行会报错)

"&local="+'${curLang}'这个参数是我用来做中英文切换的

解码方法可以在插件的viewer.js里找到如下：

看到return params是不是想到和图四画红圈的部分挂上关系了，没错就是的。

这样就ok啦。下面的两种方式也是同样的道理，只不过在页面上调用的方式不同罢了‘

看一下我的效果吧

2.3 开始调用方式（三）
<%--var pdfUrl="/xxx/viewPDF.do?xxxUUID=ff8080816c93498b016c934a1c3f0000";--%>
/*<h1 onclick="detail()">点击查看PDF文件</h1>

function detail() {
//打开一个新的窗体
window.open("/static/js/pdfJs/web/viewer.html?file="+encodeURIComponent(pdfUrl));
}*/

2.4 开始调用方式（四）<%--方式三弹窗iframe--%>

/*<h1 onclick="detail()">点击查看PDF文件</h1>
function detail() {
layer.open({
type: 2,
title: false,
//closeBtn: 0,
area: ['99%', '89%'],//宽，高
//skin: 'layui-layer-nobg', //没有背景色
shadeClose: false,
content: ['/xxx/viewPDF.do?xxxUUID=ff8080816c93498b016c934ae7d10001', 'no'],
});
}*/结语：
刚开始需求说要做一个pdf预览功能的时候我也是很萌逼的,就在网上参考了很多前辈们经验才做出来的,后面又加了一些其它的功能，有时间再写吧

想做一个对社会有贡献的人，喜欢分享哈哈哈！

附上一些参考博客地址：
https://blog.csdn.net/jianyuerensheng/article/details/79570781
https://www.cnblogs.com/kagome2014/p/kagome2014001.htmlhttps://www.cnblogs.com/lvmylife/p/6651672.html
pdf.js下载：https://mozilla.github.io/pdf.js/

pdf.jsGit:https://github.com/mozilla/pdf.js#readme