安装qrcode依赖
npm install qecode
页面部分
<canvas id="qrcode" ref="qrcode" width="200" height="200"></canvas>
<a href="javascript:;" @click="downloadCode"> 下载二维码</a href="javascript:;">
<script>
import qrcode from "qrcode"; //引入qrcode
export default {
methods:{
// 下载二维码
downloadCode(){
let link= ""//生成二维码的内容 自个填
this.generateQRCode(link)
},
// 生成二维码的方法
generateQRCode(content) {
this.$nextTick(() => {
const canvas = this.$refs.qrcode;
canvas.width = 200;
canvas.height = 200;
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
qrcode.toCanvas(
canvas,
content,
{
width: 200,
},
(error) => {
this.savePic()
},
);
});
},
//保存canvas 生成的二维码图片
savePic() {
var canvasData =document.getElementById('qrcode');
var a = document.createElement("a");
a.href = canvasData.toDataURL();;
a.download = "drcQrcode";
a.click();
},
}
}
</script>