pdf.js实战，含水印，电子签名解决方案

时间：2023-03-31 21:59:19 vue.js

.cpdf{display:flex;证明内容：居中；对齐项目：居中；.center{文本对齐：c进入;高度：100%；溢出：隐藏；填充顶部：20px；.contor{位置：固定；底部：30px；左：0；宽度：100%；z-指数：99999；20pxmargin-bottom:10px;}}}}项目涉及移动端查看电子合同的问题。我来回尝试了三种解决方案。真是步步为营。三种解决方案各有各的优势。不流水，直接上传代码，根据自己的需要选择。1.pdf-vue直接使用vue-pdf插件。核心代码是pdf.js，只不过是自己封装而已。优点是方便快捷，缺点是不能加载电子签名。github地址：https://github.com/FranckFrei...1、npminstallpdf-vue--save2、模板代码3、js代码导入pdffrom'vue-pdf'exportdefault{components:{pdf},data(){return{currentPage:0,//pdf文件的页码pageCount:0,//pdf文件的总页数菲尔eType:'pdf',//文件类型　　　　src:'',//pdf文件地址}},　　created:{　　　　//有时候PDF文件地址会出现跨域，最这里很重要容易处理　　　　this.src=pdf.createLoadingTask(this.src)　　}method:{//改变PDF页码，传递val来区分上一页和下一页的值,0上一页,1下一页changePdfPage(val){//console.log(val)if(val===0&&this.currentPage>1){this.currentPage--//console.log(this.currentPage)}if(val===1&&this.currentPage上一页页面：/下一页

.cpdf{display:flex;证明内容：居中；对齐项目：居中；.center{文本对齐：c进入;高度：100%；溢出：隐藏；填充顶部：20px；.contor{位置：固定；底部：30px；左：0；宽度：100%；z-指数：99999；20pxmargin-bottom:10px;}}}}3.直接把它当成一个组件，直接引用即可importcdpdffrom'../../../components/pdf.vue'一开始项目使用pdf-dist，因为后面无法显示电子签名：Warning:Unimplementedwidgetfieldtype"Sig",fallingbacktobasefieldtype。从网上搜了很多方法都说需要修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN:if(data.fieldType==='Sig'){warn('unimplementedannotation类型：小部件签名');//注释下面的代码行this.setFlags(AnnotationFlag.HIDDEN);}可能是移动端使用微信浏览器的原因。注释掉代码还是不太方便，只能想其他办法了。三、pdf.js最后用了最笨的办法，直接从GitHub上拉下pdf.js的demo，将demo中的html文件用iframe标签包裹起来，直接使用，完美解决了电子签名的问题:1.从github上拉取源码，或者直接从https://mozilla.github.io/pdf下载...下载后放在public文件下(3.x脚手架)2.直接iframe标签并粗略设置srcthis.pdfUrl='../pdf/web/viewer.html?file='+this.pdfurl,+'PDF'pdfUrl是iframe标签的url，pdfurl是要查看的pdf文件的url。移动端，因为文件上有电子签名，所以试试我讨论了几个方案，个人还是推荐第二个方案。如果没有电子签名，公众号会定期更新实战和基础博客。欢迎兄弟姐妹关注！