PDFViewer的pdfvuer

背景公司需要实现一个PDF电子签名项目，使用pdfvuer插件，使用步骤1加载包：pdfvuernpmipdfvuer2。importimportpdfvuerfrom'pdfvuer'//pdfvuer版本为@1.6.1import'pdfjs-dist/build/pdf.worker.entry'3.pdf预览（简化版）importpdfvuerfrom'pdfvuer'//pdfvuerversionis@1.6.1import'pdfjs-dist/build/pdf.worker.entry'exportdefault{name:'Pdfvuer',components:{pdf:pdfvuer},data(){return{page:1,//当前页numPages:0,//总页数pdfData:undefineded,inputPage:1,//输入页码}},mounted(){this.getPdf()window.addEventListener('scroll',this.handleScroll,true);},beforeDestroy(){window.removeEventListener('滚动',this.handleScroll,true);},watch:{show:function(s){if(s){this.getPdf()}}},methods:{//获取pdf信息getPdf(){this.pdfData=pdfvuer.createLoadingTask('/test.pdf')this.pdfData.then(pdf=>{this.numPages=pdf.numPages}).catch(err=>{console.log(err)})},//滚动事件滚动时更新页码handleScroll(){letscrollTop=this.getScrollTop()//滚动高度letonePageHeight=this.getAttributeValue('page','height')//单页高度this.page=Math.round(scrollTop/onePageHeight)+1//this.inputPage=this.page},//获取滚动高度getScrollTop(){letscroll_top=0;如果（document.documentElement&&document.documentElement.scrollTop）{scroll_top=document.documentElement.scrollTop;}elseif(document.body){scroll_top=document.body.scrollTop;}返回scroll_top；},//滚动到固定位置goTo(target){letscrollT=document.body.scrollTop||document.documentElement.scrollTopif(scrollT>target){lettimer=setInterval(function(){letscrollT=document.body.scrollTop||document.documentElement.scrollTopletstep=Math.floor(-scrollT/6);文档.documentElement.scrollTop=document.body.scrollTop=step+scrollT;if(scrollT<=target){document.body.scrollTop=document.documentElement.scrollTop=目标；清除超时（计时器）；}},20)}elseif(scrollT===0){lettimer=setInterval(function(){letscrollT=document.body.scrollTop||document.documentElement.scrollTopletstep=Math.floor(300/3*0.7);document.documentElement.scrollTop=document.body.scrollTop=step+scrollT;if(scrollT>=target){document.body.scrollTop=document.documentElement.scrollTop=target;clearTimeout(timer);}},20)}elseif(scrollT=target){document.body.scrollTop=document.documentElement.scrollTop=target;清除超时（计时器）；}},20)}elseif(target===scrollT){returnfalse;}},//上一页prePage(){letpage=this.page;页=页>1?页-1:1;这个。页面=页面；this.changeScrollTop()},//下一页nextPage(){letpage=this.page;page=pagethis.numPages？this.page=this.numPages:this.page=~~this.inputPagethis.inputPage<1?this.page=1:this.page=~~this.inputPage这个。changeScrollTop()},//根据页码修改页面滚动距离changeScrollTop(){letonePageHeight=document.getElementById('contentArea').offsetHeight/this.numPagesletscrollTo=onePageHeight*(this.page-1)this.goTo(scrollTo)},//获取节点的属性值只适用于获取px相关数据getAttributeValue(className,attr){letpageDiv=document.querySelector('.'+className);让attrsValue=getComputedStyle(pageDiv);letattrVal=attrsValue[attr]returnNumber(attrVal.substr(0,attrVal.length-2))//截取px},}}5.踩坑集合a。签名不显示问题pdf预览电子签名显示问题解决把node_modules/pdfjs-dist/build/pdf.worker.js中这行代码注释掉if(data.fieldType==="Sig"){data.fieldValue=null;//注释掉下面一行以显示电子签名//this.setFlags(_util.AnnotationFlag.HIDDEN);}在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释掉这行代码if(data.fieldType==="Sig"){data.fieldValue=null;//注释掉最后一行显示电子签名//_this3.setFlags(_util.AnnotationFlag.HIDDEN);}修改node_modules成功后遇到新问题每次重新npminstall修改代码后消失guide手动修改node_modules中的依赖包(patch-package)6.总结代码guide实践平台如何使用pdfstampeddrag-and-drop代码和一些其他的小插件，需要的小可爱们可以自己拉。如果路过的话，可以给个赞哦~~