先下载插件
npm install html2canvas --save
页面引用
import html2canvas from "html2canvas";
页面
<div style="text-align: center; padding: 20px 0" ref="imageWrapper">
<div v-if="posterList.response">{{ posterList.response.corpName }}</div>
<div>{{ posterList.post }}</div>
<el-image
style="width: 200px; height: 200px"
:src="codeUrl"
:preview-src-list="[codeUrl]"
>
</el-image>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" plain @click="dialogVisible = false">
取 消
</el-button>
<el-button type="primary" @click="downloadCode"> 下载海报 </el-button>
</span>
data() {
return {
posterList: {},
}
}
methods: {
//获取二维码
getCode(row) {
this.posterList = row;
taskQrcode(row.taskId).then((res) => {
if (res.code == 200) {
this.dialogVisible = true;
this.codeUrl = "data:image/png;base64," + res.data;
}
});
},
// 下载海报
downloadCode() {
html2canvas(this.$refs.imageWrapper).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
// this.imgUrl = dataURL
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = dataURL; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
});
},
}