需求：在线浏览pdf文件，并且禁止掉用户下载。
未测试
分析：普通的iframe、embed标签都只能实现在线浏览pdf的功能，无法禁止掉工具栏的下载打印功能。只能尝试使用插件，pdfobject.js这个插件可以实现功能，而且操作简单，但是兼容性不好，不兼容火狐、ie浏览器。于是替换成pdf.js
实现：因为不想在服务器放太多东西，所以引用pdf后的方法都是自己调用的api实现的。
1.首先npm下载pdf.js
npm isntall --save pdfjs-dist
2.created中引入pdf.js （刚开始使用import引入本地的pfd.js文件，谷歌浏览器没有问题。但是火狐无法正常显示）
let PDFJS = require('pdfjs-dist').PDFJS //PDF.JS必须require引进去才不会有兼容问题
PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
3.页面布局pdf的样式和想要使用的功能 。这里是上一页，下一页，全屏功能
进入全屏
上一页
Page:/
下一页
4.一些方法。因为刚进页面的时候是固定的一块区域，还需要有全屏功能。于是按pdf的原来大小算出了比例，按比例计算的viewport。如果没有这个需求，可以直接定义viewport
data中定义的变量
wid:645, //刚进入页面中的pdf容器的宽度
pdfDoc:null,//pdfjs 生成的对象
pageNum:1,//
pageRendering:false,
pageNumPending:null,
scale:null,//放大倍数
page_num:0,//当前页数
page_count:0,//总页数
renderPage(num) {//渲染pdf
letvm=this
this.pageRendering=true;
letcanvas=this.$refs.canvas// Using promise to fetch the page
vm.pdfDoc.getPage(num).then(function(page) {
vm.scale=vm.wid/page.getViewport(1.0).width //vm.wid是在data中定义的一个变量，最初设置的pdf的宽度
varviewport=page.getViewport(vm.scale);
// var viewport = page.getViewport(vm.scale); //alert(vm.canvas.height)
canvas.height=viewport.height;
canvas.width=viewport.width;// Render PDF page into canvas context
console.log(vm.count)
varrenderContext= {
canvasContext:vm.ctx,
viewport:viewport
};
varrenderTask=page.render(renderContext);// Wait for rendering to finish
renderTask.promise.then(function() {
vm.pageRendering=false;
if(vm.pageNumPending!==null) {// New page rendering is pending
this.renderPage(vm.pageNumPending);
vm.pageNumPending=null;
}
});
});
vm.page_num=vm.pageNum;
},
上一页：
prevpage() {//上一页
letvm=this
if(vm.pageNum<=1) {
return;
}
vm.pageNum--;
this.queueRenderPage(vm.pageNum);
},
下一页
nextpage() {//下一页
letvm=this
if(vm.pageNum>=vm.page_count) {
return;
}
vm.pageNum++;
this.queueRenderPage(vm.pageNum);
},
queueRenderPage(num) {
if(this.pageRendering) {
this.pageNumPending=num;
}else{
this.renderPage(num);
}
},
渲染pdf文件。 this.pdf是服务器的pdf路径。
PDFJS.getDocument(this.pdf).then(function(pdfDoc_) {//初始化pdf
that.pageNum=1
that.pdfDoc=pdfDoc_;
that.page_count=that.pdfDoc.numPages
that.renderPage(that.pageNum);
});
全屏：
this.winWidth=window.document.documentElement.clientWidth //改变pdf容器的宽高为全屏大小
this.winHeight=window.document.documentElement.clientHeight
letvm=this
vm.wid=window.document.documentElement.clientWidth-2 //重新复制viewport
// vm.wid= window.document.documentElement.clientHeight/vm.count
this.$refs.cpdf.style.width=window.document.documentElement.clientWidth
this.queueRenderPage(this.pageNum)
// 当用户按esc键退回到之前的大小，监听的退出全屏事件。重新wid变量，渲染viewport
document.addEventListener("webkitfullscreenchange",function() {
if(!document.webkitIsFullScreen){
vm.wid=645
vm.queueRenderPage(vm.pageNum)
}
},false)
document.addEventListener("fullscreenchange",function() {
if(!document.fullscreen){
vm.wid=645
vm.queueRenderPage(vm.pageNum)
}
},false);
document.addEventListener("mozfullscreenchange",function() {
if(!document.mozFullScreen){
vm.wid=645
vm.queueRenderPage(vm.pageNum)
}
},false);
document.addEventListener("msfullscreenchange",function() {
if(!document.msFullscreenElement){
vm.wid=645
vm.queueRenderPage(vm.pageNum)
}
fullscreenState.innerHTML= (document.msFullscreenElement)?"":"not ";
},false);
作者：Y丶小琪
链接：https://www.jianshu.com/p/ecd34ab2cf55
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
出处：https://www.jianshu.com/p/ecd34ab2cf55