vue使用qrcode，canvas生成二维码图片，并下载

根据一个链接生成一个二维码图片

1.npm install qrcode --save-dev

2.在main.js中引用

import qrcode from 'qrcode'

3.组件中使用生成图片，并下载

 

// 下载图片

downloadPic(){

//找到canvas标签

// let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');

let myCanvas = document.getElementById('qrcode');

// 下载二维码图片

let base64Img = myCanvas.toDataURL();

//创建一个a标签节点

let a = document.createElement("a")

//设置a标签的href属性（将canvas变成png图片）

a.href = base64Img

//设置下载文件的名字

a.download = "img"+ new Date().getTime() || '下载图片名称'

let event = document.createEvent('MouseEvents')

event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null)

a.dispatchEvent(event)

},

 

//生成二维码

getQrcode(data){

console.log(data);

let qrcode= document.getElementById('qrcode')

QRCode.toCanvas(qrcode, data, (error)=>{

if (error) console.error(error)

this.qrcodeSrc=qrcode.toDataURL()

this.qrcodeUrl = data

})

},