作者：jerryWu 转发连接：https://juejin.im/post/5ec48f84e51d45788266753a PDF.js实战，含水印、电子签章解决方案项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。一、vue-pdf 直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。 github地址： https://github.com/FranckFreiburger/vue-pdf 1、npm install pdf-vue --save2、template代码 // 上一页 Preview {{currentPage}} / {{pageCount}} // 下一页 Next // 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了 // 加载事件 复制代码3、js代码import pdf from 'vue-pdf'export default { components: {pdf}, data () { return { currentPage: 0, // pdf文件页码 pageCount: 0, // pdf文件总页数 fileType: '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 < this.pageCount) { this.currentPage // console.log(this.currentPage) } }, // pdf加载时 loadPdfHandler (e) { this.currentPage = 1 // 加载的时候先加载第一页 } }}复制代码使用非常方便，尤其是只需要翻页，或者不需要翻页的，强烈推荐。二、pdf-dist pdf-dist也是基于pdf.js的一个组件，只不过没有封装，需要自己配置，优点是可配置，可实现特殊的需求，缺点是需要自己封装，水印可加载，网上说可以加载电子签章，我的加载不出来，所以还是没采用。 1、npm install pdf-dist --save2、封装一个pdf.vue 上一页 Page: / 下一页 .cpdf { display: flex; justify-content: center; align-items: center; .center { text-align: center; height: 100%; overflow: hidden; padding-top: 20px; .contor { position: fixed; bottom: 30px; left: 0; width: 100%; z-index: 99999; font-size 30px margin-top 20px margin-bottom: 10px; } } }复制代码3、直接当成组件，引用就可以了import cdpdf from '../../../components/pdf.vue'复制代码一开始项目使用的是pdf-dist，因为后来电子签章显示不出来： Warning: Unimplemented widget field type "Sig", falling back to base field type.复制代码从网上搜了很多方法，说是需要修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN： if(data.fieldType==='Sig') { warn('unimplemented annotation type: Widget signature'); // 注释下面这行代码 this.setFlags(AnnotationFlag.HIDDEN); }复制代码可能是移动端使用微信浏览器的原因，注释掉代码还是不好使，只能再想其他办法了三、pdf.js 最后用了最笨的办法，直接从GitHub拉下来pdf.js的demo，用iframe标签包住demo里的HTML文件，直接套着用，完美解决电子签章的问题： 1、从GitHub拉一下源码，或者从这个地址直接下载 https://github.com/mozilla/pdf.js 下载下来以后放在public文件下(3.x脚手架) 2、iframe标签直接粗暴的设置srcthis.pdfUrl = '../pdf/web/viewer.html?file=' this.pdfurl, 'PDF'pdfUrl是iframe标签的URL，pdfurl是需要查看的PDF文件的url复制代码总结只要能实现需求的代码就是好代码，我的项目是移动端查看PDF文件，因为文件上有电子签章，所以尝试了好几种方案，个人还是推荐第二种方案，如果没有电子签章的情况下。推荐Vue学习资料文章：《基于vue element的后台管理系统解决方案》《Vue仿蘑菇街商城项目(vue koa mongodb)》《基于 electron-vue 开发的音乐播放器「实践」》《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》《消息队列助你成为高薪 Node.js 工程师》《Node.js 中的 stream 模块详解》《「干货」Deno TCP Echo Server 是怎么运行的?》《「干货」了不起的 Deno 实战教程》《「干货」通俗易懂的Deno 入门教程》《Deno 正式发布，彻底弄明白和 node 的区别》《「实践」基于Apify node react/vue搭建一个有点意思的爬虫平台》《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》《深入Vue 必学高阶组件 HOC「进阶篇」》《深入学习Vue的data、computed、watch来实现最精简响应式系统》《10个实例小练习，快速入门熟练 Vue3 核心新特性(一)》《10个实例小练习，快速入门熟练 Vue3 核心新特性(二)》《教你部署搭建一个Vue-cli4 Webpack移动端框架「实践」》《2020前端就业Vue框架篇「实践」》《详解Vue3中 router 带来了哪些变化?》《Vue项目部署及性能优化指导篇「实践」》《Vue高性能渲染大数据Tree组件「实践」》《尤大大细品VuePress搭建技术网站与个人博客「实践」》《10个Vue开发技巧「实践」》《是什么导致尤大大选择放弃Webpack?【vite 原理解析】》《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》《实践Vue 3.0做JSX(TSX)风格的组件开发》《一篇文章教你并列比较React.js和Vue.js的语法【实践】》《手拉手带你开启Vue3世界的鬼斧神工【实践】》《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》《怎样为你的 Vue.js 单页应用提速》《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》《【新消息】Vue 3.0 Beta 版本发布，你还学的动么?》《Vue真是太好了 壹万多字的Vue知识点 超详细!》《Vue Koa从零打造一个H5页面可视化编辑器——Quark-h5》《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》《手把手教你深入浅出vue-cli3升级vue-cli4的方法》《Vue 3.0 Beta 和React 开发者分别杠上了》《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》《Vue3 尝鲜》《总结Vue组件的通信》《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》《Vue 开源项目 TOP45》《2020 年，Vue 受欢迎程度是否会超过 React?》《尤雨溪：Vue 3.0的设计原则》《使用vue实现HTML页面生成图片》《实现全栈收银系统(Node Vue)(上)》《实现全栈收银系统(Node Vue)(下)》《vue引入原生高德地图》《Vue合理配置WebSocket并实现群聊》《多年vue项目实战经验汇总》《vue之将echart封装为组件》《基于 Vue 的两层吸顶踩坑总结》《Vue插件总结【前端开发必备】》《Vue 开发必须知道的 36 个技巧【近1W字】》《构建大型 Vue.js 项目的10条建议》《深入理解vue中的slot与slot-scope》《手把手教你Vue解析pdf(base64)转图片【实践】》《使用vue node搭建前端异常监控系统》《推荐 8 个漂亮的 vue.js 进度条组件》《基于Vue实现拖拽升级(九宫格拖拽)》《手摸手，带你用vue撸后台 系列二(登录权限篇)》《手摸手，带你用vue撸后台 系列三(实战篇)》《前端框架用vue还是react?清晰对比两者差异》《Vue组件间通信几种方式，你用哪种?【实践】》《浅析 React / Vue 跨端渲染原理与实现》《10个Vue开发技巧助力成为更好的工程师》《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》《1W字长文 多图，带你了解vue的双向数据绑定源码实现》《深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】》《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》《手把手教你D3.js 实现数据可视化极速上手到Vue应用》《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】》《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】》《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】》《Vue3.0权限管理实现流程【实践】》《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》作者：jerryWu 转发连接：https://juejin.im/post/5ec48f84e51d45788266753a