大家好,今天小编来为大家解答以下的问题，关于vue管理网站实训源码分享，vue管理平台这个很多人还不知道，现在让我们一起来看看吧！
作者：jerryWu
转发连接：https://juejin.im/post/5ec48f84e51d45788266753a
pdf.js实战，含水印、电子签章解决方案
项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。
一、vue-pdf
直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。
github地址：https://github.com/FranckFreiburger/vue-pdf
1、npminstallpdf-vue–save
2、template代码
<template>\n<divclass=&34;v-show=&39;pdf&34;>\n<pclass=&34;>\n//上一页\n<span@click=&34;class=&34;:class=&34;>Preview</span>\n{{currentPage}}/{{pageCount}}\n//下一页\n<span@click=&34;class=&34;:class=&34;>Next</span>\n</p>\n//自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了\n<pdf\n:src=&34;//src需要展示的PDF地址\n:page=&34;//当前展示的PDF页码\n@num-pages=&34;//PDF文件总页码\n@page-loaded=&34;//一开始加载的页面\n@loaded=&34;>//加载事件\n</pdf>\n</div>\n</template>\n复制代码
3、js代码
importpdffrom&39;\nexportdefault{\ncomponents:{pdf},\ndata(){\nreturn{\ncurrentPage:0,//pdf文件页码\npageCount:0,//pdf文件总页数\nfileType:&39;,//文件类型\n????src:&39;,//pdf文件地址\n}\n},\n??created:{\n????//有时PDF文件地址会出现跨域的情况,这里最好处理一下\n????this.src=pdf.createLoadingTask(this.src)\n??}\nmethod:{\n//改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页\nchangePdfPage(val){\n//console.log(val)\nif(val===0&&this.currentPage>1){\nthis.currentPage–\n//console.log(this.currentPage)\n}\nif(val===1&&this.currentPage<this.pageCount){\nthis.currentPage++\n//console.log(this.currentPage)\n}\n},\n\n//pdf加载时\nloadPdfHandler(e){\nthis.currentPage=1//加载的时候先加载第一页\n}\n\n}\n}\n复制代码
使用非常方便，尤其是只需要翻页，或者不需要翻页的，强烈推荐。
二、pdf-dist
pdf-dist也是基于pdf.js的一个组件，只不过没有封装，需要自己配置，优点是可配置，可实现特殊的需求，缺点是需要自己封装，水印可加载，网上说可以加载电子签章，我的加载不出来，所以还是没采用。
1、npminstallpdf-dist–save
2、封装一个pdf.vue
<template>\n<divclass=&34;id=&34;>\n<divclass=&34;>\n<canvasclass=&34;id=&34;></canvas>\n<divclass=&34;>\n<button@click=&34;style=&34;>上一页</button>\n<span>Page:<spanv-text=&34;></span>/<spanv-text=&34;></span></span>\n<button@click=&34;style=&34;>下一页</button>\n</div>\n</div>\n</div>\n</template>\n<script>\nimportPDFJSfrom&39;\n\nexportdefault{\nname:&39;,\n//接收父组件传来的参数\nprops:[&39;],\ncomponents:{},\ndata(){\nreturn{\npdfDoc:null,//pdfjs生成的对象\npageNum:1,//\npageRendering:false,\npageNumPending:null,\nscale:1,//放大倍数\npage_num:0,//当前页数\npage_count:0,//总页数\nmaxscale:2,//最大放大倍数\nminscale:0.8//最小放大倍数\n}\n},\nmethods:{\nrenderPage(num){//渲染pdf\nletvm=this\nthis.pageRendering=true\nletcanvas=document.getElementById(&39;)\nletctx=canvas.getContext(&39;)\nletbsr=\nctx.webkitBackingStorePixelRatio||\nctx.mozBackingStorePixelRatio||\nctx.msBackingStorePixelRatio||\nctx.oBackingStorePixelRatio||\nctx.backingStorePixelRatio||\n1\nletdpr=window.devicePixelRatio||1\nletratio=dpr/bsr\n//Usingpromisetofetchthepage\nthis.pdfDoc.getPage(num).then(function(page){\nvarviewport=page.getViewport(screen.availWidth/page.getViewport(1).width)\n//alert(vm.canvas.height)\ncanvas.height=ratio*viewport.width\ncanvas.width=ratio*viewport.height\ncanvas.style.width=1.5*viewport.width+&39;\ncanvas.style.height=1*viewport.height+&39;\nctx.setTransform(ratio,0,0,ratio,0,0)\n//RenderPDFpageintocanvascontext\nvarrenderContext={\ncanvasContext:ctx,\nviewport:viewport\n}\nvarrenderTask=page.render(renderContext)\n\n//Waitforrenderingtofinish\nrenderTask.promise.then(function(){\nvm.pageRendering=false\nif(vm.pageNumPending!==null){\n//Newpagerenderingispending\nvm.renderPage(vm.pageNumPending)\nvm.pageNumPending=null\n}\n})\n})\nvm.page_num=vm.pageNum\n},\naddscale(){//放大\nif(this.scale>=this.maxscale){\nreturn\n}\nthis.scale+=0.1\nthis.queueRenderPage(this.pageNum)\n},\nminus(){//缩小\nif(this.scale<=this.minscale){\nreturn\n}\nthis.scale-=0.1\nthis.queueRenderPage(this.pageNum)\n},\nprev(){//上一页\nletvm=this\nif(vm.pageNum<=1){\nreturn\n}\nvm.pageNum–\nvm.queueRenderPage(vm.pageNum)\n},\nnext(){//下一页\nletvm=this\nif(vm.pageNum>=vm.page_count){\nreturn\n}\nvm.pageNum++\nvm.queueRenderPage(vm.pageNum)\n},\nclosepdf(){//关闭PDF\nthis.$emit(&39;)\n},\nqueueRenderPage(num){\nif(this.pageRendering){\nthis.pageNumPending=num\n}else{\nthis.renderPage(num)\n}\n}\n},\ncomputed:{\nctx(){\nletid=document.getElementById(&39;)\nreturnid.getContext(&39;)\n}\n},\nmounted(){\nletvm=this\nPDFJS.getDocument(vm.pdfurl).then(function(pdfDoc_){//初始化pdf\nvm.pdfDoc=pdfDoc_\nvm.page_count=vm.pdfDoc.numPages\nvm.renderPage(vm.pageNum)\n})\n}\n}\n\n</script>\n<stylelang=&34;scoped>\n.cpdf{\ndisplay:flex;\njustify-content:center;\nalign-items:center;\n.center{\ntext-align:center;\nheight:100%;\noverflow:hidden;\npadding-top:20px;\n.contor{\nposition:fixed;\nbottom:30px;\nleft:0;\nwidth:100%;\nz-index:99999;\nfont-size30px\nmargin-top20px\nmargin-bottom:10px;\n}\n}\n}\n</style>\n复制代码
3、直接当成组件，引用就可以了
importcdpdffrom&39;\n\n<cdpdf:pdfurl=&34;></cdpdf>\n复制代码
一开始项目使用的是pdf-dist，因为后来电子签章显示不出来：
Warning:Unimplementedwidgetfieldtype&34;,fallingbacktobasefieldtype.\n复制代码
从网上搜了很多方法，说是需要修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN：
if(data.fieldType===&39;){\nwarn(&39;);\n//注释下面这行代码\nthis.setFlags(AnnotationFlag.HIDDEN);\n}\n复制代码
可能是移动端使用微信浏览器的原因，注释掉代码还是不好使，只能再想其他办法了
三、pdf.js
最后用了最笨的办法，直接从GitHub拉下来pdf.js的demo，用iframe标签包住demo里的HTML文件，直接套着用，完美解决电子签章的问题：
1、从GitHub拉一下源码，或者从这个地址直接下载
https://github.com/mozilla/pdf.js
下载下来以后放在public文件下（3.x脚手架）
2、iframe标签直接粗暴的设置src
<iframe:src=&34;:style=&34;style=&34;></iframe>\n\nthis.pdfUrl=&39;+this.pdfurl,+&39;\n\npdfUrl是iframe标签的URL，pdfurl是需要查看的PDF文件的url\n复制代码
总结
只要能实现需求的代码就是好代码，我的项目是移动端查看PDF文件，因为文件上有电子签章，所以尝试了好几种方案，个人还是推荐第二种方案，如果没有电子签章的情况下。
推荐Vue学习资料文章：
《基于vue+element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目（vue+koa+mongodb）》
《基于electron-vue开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《消息队列助你成为高薪Node.js工程师》
《Node.js中的stream模块详解》
《「干货」DenoTCPEchoServer是怎么运行的？》
《「干货」了不起的Deno实战教程》
《「干货」通俗易懂的Deno入门教程》
《Deno正式发布，彻底弄明白和node的区别》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比Vue3.0CompositionAPI和ReactHooks》
《前端网红框架的插件机制全梳理（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（Vue3.0）之小试牛刀【实践】》
《带你了解vue-next（Vue3.0）之初入茅庐【实践】》
《实践Vue3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的Vue.js单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0Beta版本新特性知识点汇总》
《【新消息】Vue3.0Beta版本发布，你还学的动么？》
《Vue真是太好了壹万多字的Vue知识点超详细!》
《Vue+Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3跟着尤雨溪学TypeScript之Ref【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue3.0Beta和React开发者分别杠上了》
《手把手教你用vuedragchart实现一个可以拖动/缩放的图表组件》
《Vue3尝鲜》
《总结Vue组件的通信》
《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》
《Vue开源项目TOP45》
《2020年，Vue受欢迎程度是否会超过React？》
《尤雨溪：Vue3.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
vue管理网站实训源码分享和vue管理平台的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！