当前位置: 首页 > Web前端 > vue.js

【记录】vue点击元素生成图片,下载

时间:2023-03-31 18:20:51 vue.js

使用条件cnpmihtml2canvas-Scomponentimportimporthtml2canvasfrom"html2canvas";templatehtml2canvastest

methodsinitImage(){const{clientWidth,clientHeight}=this.$refs.test.$el;//防止保存的图片出现白边constparams={scrollY:0,scrollX:0,width:clientWidth,height:clientHeight,backgroundColor:"transparent",//#0634d0}html2canvas(this.$refs.test.$el,params).then((canvas)=??>{constlink=document.createElement('a')link.href=canvas.toDataURL()//可以直接赋值给img元素使用link.setAttribute('下载',this.qrCodeTitle+'.png')link.style.display='none'document.body.appendChild(link)link.click()});}