vue整合html2canvas插件将div（qrcode生成的二维码和图片以及文字）生成图片并下载到本地

npm install html2canvas -S

import html2canvas from 'html2canvas';

第一种方法：

<div
  v-if="ewm"
  class="img1"
  v-bind:style="{ top: top+'px', left: left + 'px' }"
   style="z-index:3"
 >
   <div ref="courseInfo">
        <span class="shopNameClass">{{this.shopInformation.shopName}}</span>
        <div id="canbox">
        	<canvas id="canvas1"></canvas>  //  二维码
        	<img :src="codeIMG" alt />
        	<el-button type="primary" class="button8" @click="saveImg">保存图片</el-button>
        </div>
   </div>
</div>

saveImg() {
     html2canvas(this.$refs.courseInfo).then(canvas => {
        // this.$refs.addImage.append(canvas);//在下面添加canvas节点
        let link = document.createElement("a");
        link.href = canvas.toDataURL();//下载链接
        link.setAttribute("download","qrcode.png");
        link.style.display = "none";//a标签隐藏
        document.body.appendChild(link);
        link.click();
      }); 
}

效果图如下：

第二种方法：

<img :src="codeIMG" alt />

import codeIMG from '@/assets/icon/bctps.png';

data() {
	return {
		codeIMG: codeIMG
	}
}

downloadCodeImg(){
    console.log('下载图片')
    var a = document.createElement('a')
    a.download = name || 'pic'
    // 设置图片地址
    a.href = this.dataURL;
    a.click();
}