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

时间：2020-01-15 18:12:35 收藏：0 阅读：75

以下是我在实际项目开发中的过程分享前端是: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>--%>

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.html
https://www.cnblogs.com/lvmylife/p/6651672.html

pdf.js下载：https://mozilla.github.io/pdf.js/

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

原文：https://www.cnblogs.com/time1997/p/12192212.html

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

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