vue中PDF实现在线浏览，禁⽌下载，打印
需求：在线浏览pdf⽂件，并且禁⽌掉⽤户下载打印的效果。
分析：普通的iframe、embed标签都只能实现在线浏览pdf的功能，⽆法禁⽌掉⼯具栏的下载打印功能。只能尝试使⽤插件，pdfobject.js这个插件可以实现功能，⽽且操作简单，但是兼容性不好，不兼容⽕狐、ie浏览器。于是替换成pdf.js
实现：因为不想在服务器放太多东西，所以引⽤pdf后的⽅法都是⾃⼰调⽤的api实现的。
以下仅是核⼼代码，css就不展⽰了。
1.⾸先npm下载pdf.js
npm isntall --save pdfjs-dist
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
Page(num).then(function(page) {
vm.scale=vm.Viewport(1.0).width    //vm.wid是在data中定义的⼀个变量，最初设置的pdf的宽度
Viewport(vm.scale);
// var viewport = Viewport(vm.scale);        //alert(vm.canvas.height)
canvas.height=viewport.height;
canvas.width=viewport.width;// Render PDF page into canvas context
console.unt)
varrenderContext= {
pending,
viewport:viewport
};
der(renderContext);// Wait for rendering to finish
renderTask.promise.then(function() {
vm.pageRendering=false;
if(vm.pageNumPending!==null) {// New page rendering is pending
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{
}
},
渲染pdf⽂件。 this.pdf是服务器的pdf路径。
that.pageNum=1
that.pdfDoc=pdfDoc_;
that.page_count=that.pdfDoc.numPages
});
全屏：
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.unt
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(!FullScreen){
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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。