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();
}