实现效果:
1.安装
npm install --save qrcode
2.引入
<el-button type="primary" style="float:right" @click="downLoad">立即下载</el-button>
import QRCode from 'qrcodejs2'
data() {
return {
callUrl:'https://www.baidu.com/'
}
},
created() {
// 生成二维码图片(需要在dom生成之后再生成,否则会报错!!!)
this.$nextTick(() => {
this.generateQrcode()
})
},
methods: {
//生成
generateQrcode() {
this.qrcode = new QRCode('qrcode', {
width: 200,
height: 200,
text: this.callUrl // 二维码地址
})
},
//下载
downLoad() {
const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
const a = document.createElement('a')
a.href = myCanvas[0].toDataURL('image/png')
a.download = '二维码'
a.click()
this.$message({
message: '正在进行下载保存,请稍后!',
type: 'success'
})
}
}