在vue项目中使用html2canvas实现保存网页为图片

下载内容：npm install --save html2canvas

<div  ref="mine"> 这里是要截图的部分</div>

 <button @click="download()" >截图</button>
   <a :href= "downImg"  download="下载图片的名字" ><img :src="downImg" width="100%"/></a>//用一个a标签包住img。这样就可以使用a的download属性来点击下载图片了

import html2canvas from 'html2canvas'

download(){
          var this1=this;
          setTimeout(function () {
             　　 html2canvas(this1.$refs.mine,{
                backgroundColor: null
              }).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png");
                this1.downImg=dataURL;
                console.log(dataURL)
              });

 },0)
      },

扫描二维码关注公众号，回复： 5087798 查看本文章

也可以下载这个参考一下https://download.csdn.net/download/qq_33769914/10937282

写法和上面得大相径庭但是还是有多不同得。但是实现功能一样得。