安装插件
npm install qrcodejs2 --save
在template中使用
<div id="qrcode" ref="qrCodeDiv"></div>
<button type="text" @click="downloadCode">保存到本地<button>
按需引入
import QRCode from 'qrcodejs2';
data:{
return {
qrcode: null
}
},
methods: {
// 生成二维码
creatQrCode(qrcodeUrl) {
let text = qrcodeUrl || 'http://www.baidu.com';
this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
text: encodeURIComponent(text), //二维码地址，避免识别不了url地址将进行编码
width: 256, //单位（px）
height: 256, //单位（px）
colorDark: "#000000", //二维码颜色：支持英文、十六进制、RGB、RGBA
colorLight: "#FFFFFF", //二维码背景色：支持英文、十六进制、RGB、RGBA
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
correctLevel: QRCode.CorrectLevel.L, //容错率，由低到高：L/M/Q/H
})
},
// 保存下载二维码
downloadCode(){
let img = document.getElementById('qrcode').getElementsByTagName('img')[0];
// 构建画布
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// 构造url
let url = canvas.toDataURL('image/png');
document.getElementById('downloadImg').setAttribute('href', url);
document.getElementById('downloadImg').setAttribute('download', '我的二维码.png');
document.getElementById('downloadImg').click();
},
},
beforeDestroy() {
this.$refs.qrCodeDiv.innerHTML = ''; //清除二维码方法一
// this.qrcode.clear(); // 清除二维码方法二
},
<style lang="scss">
#qrcode{
width: 256px;
height: 256px;
img{
width: 100%;
}
}
</style>
调用方法
let qrcodeUrl = 'www.baidu.com';
this.creatQrCode(qrcodeUrl);
