安装html2canvas
npm install --save html2canvas
在所需页面引入
import html2canvas from "html2canvas"
Html
// ref="codeRef"为转换的html内容
<div ref="codeRef" style="display: flex;justify-content: center;background: #d4f6fa;flex-direction: column;align-items: center;position:relative">
<div style="font-weight: bold; letter-spacing: 1px; font-family: sans-serif; text-align: center; font-size: 20px; color: #37a0f4; padding: 0 32px; line-height: 35px; ">
{{this.form.name}}
</div>
<div style="width:100%;overflow:hidden;position:relative">
<img src="../../../../assets/yym.jpg" style="width:100%" />
<div id="yyqrcode" style="position: absolute; left: 50%; margin-left: -94px; top: 79px; "></div>
</div>
//newimg为转换好的图片
<img id="newimg" :src="yyDownImgSrc" style="width:100%;opacity:1;position:absolute;left:0;top:0;" />
</div>
<div class="t-c p-20">
<a-button style="margin-right:20px" type="primary" @click='imgDownload()'>图片下载</a-button>
<a-button @click='yyModalCancel()'>关闭</a-button>
</div>
js
// qrcode画好的二维码
yyqrcodeCanvas() {
let qrcode = new QRCode('yyqrcode', {
width: 192,
height: 192,
text: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx40f627929cbe3f80&redirect_uri=http://uam.sxymlc.com/tomcat/newHy/meetingYuyue/index.html&response_type=code&scope=snsapi_base&state='+this.form.id, // 二维码地址
colorDark : "#000",
colorLight : "#fff",
});
//整个图片转换完并赋值给图片容器
html2canvas(this.$refs.codeRef).then(canvas => {
const base64 = canvas.toDataURL('image/png')
this.yyDownImgSrc = base64
})
},
imgDownload(){
// 下载
const link = document.createElement('a');
link.href = this.yyDownImgSrc;
link.setAttribute('download', this.form.name+'预约码')
link.click();
}
下载到本地后
