1.安装 qrcodejs2 和 html2canvas
npm install --save qrcodejs2
npm install --save html2canvas
2.HTML部分
<template>
<div class="code_pic">
<div>
<div class="qr_img" id="qrcode" ref="qrcode"></div>
<p>(支持微信扫码跳转 APP签到)</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="createPicture">下载该二维码图片</el-button>
</span>
</div>
</template>
js部分
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
var qrcode = "";
export default {
data() {
return {
urlValue: "", // 生成二维码的内容
canvasImageUrl: "" , //base64图片 用作下载
};
},
methods: {
show() {
this.urlValue = '生成二维码的内容';
this.$nextTick(() => {
this.createQr();
});
},
// 生成二维码
createQr() {
var _this = this;
//生成前先清空二维码
document.getElementById("qrcode").innerHTML = "";
qrcode = new QRCode(_this.$refs.qrcode, {
width: 200, // 宽
height: 200, //高
text: _this.urlValue, //生成二维码的内容
render: "canvas", //设置渲染方式(canvas,table 默认canvas)
correctLevel: QRCode.CorrectLevel.L //二维码纠错级别(L,M,Q,H)
});
},
// 生成图片并下载
createPicture() {
html2canvas(document.querySelector("#qrcode"))
.then(canvas => {
var imgData = canvas.toDataURL("image/jpeg"); // 获得图片base64
this.canvasImageUrl = imgData;
if (window.navigator.msSaveOrOpenBlob) { //IE浏览器:创建blob对象
var bstr = atob(this.canvasImageUrls.split(",")\[1\]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr\[n\] = bstr.charCodeAt(n);
}
var blob = new Blob(\[u8arr\]);
window.navigator.msSaveOrOpenBlob(blob, "签到码" + "." + "png");
} else { // 非ie浏览器
let a = document.createElement("a");
a.href = this.canvasImageUrl;
a.setAttribute("download", "签到码");
a.click();
}
})
.catch(error => {});
}
}
};
总结
1.拿到后端给的生成二维码链接内容
2.生成二维码
3.canvas转base64图片
4.下载图片(做好兼容)