vue 生成二维码并下载

vue 项目中需要实现生成二维码，并且下载下来。

引入 qrcode ：

import QRCode from "qrcodejs2"

生成二维码：

createQRCode () {
document.getElementById("qrcode").innerHTML = ""
let qrcode = new QRCode(this.$refs['qrCodeDiv'], {
text: 'https://www.baidu.com/',
width: 188, //生成的二维码的宽度
height: 188, //生成的二维码的高度
colorDark: "#666666", // 生成的二维码的深色部分
colorLight: "#ffffff", //生成二维码的浅色部分
correctLevel: QRCode.CorrectLevel.H
})
this.downloadQRCode()
}

下载二维码：

downloadQRCode () {
let qrcode = document.getElementById('qrcode');
let img = qrcode.getElementsByTagName('img')[0];
img.onload = function () {
this.imgUrl = img.getAttribute("src");
let link = document.createElement("a");
link.setAttribute("href", this.imgUrl);
link.setAttribute("download", '123.png')
link.click();
}
}

点击按钮，生成并下载二维码，如下图：

完整代码如下：

<template>
<div class="link-container">
<el-button @click="createQRCode">下载二维码</el-button>
<div id="qrcode" ref="qrCodeDiv"></div>
</div>
</template>

<script>
import QRCode from "qrcodejs2"
export default {
name: 'Link',
components: {
QRCode
},
data () {
return {
}
},
props: {
},
watch: {},
created () {
},
methods: {
createQRCode () {
document.getElementById("qrcode").innerHTML = ""
let qrcode = new QRCode(this.$refs['qrCodeDiv'], {
text: 'https://www.baidu.com/',
width: 188, //生成的二维码的宽度
height: 188, //生成的二维码的高度
colorDark: "#666666", // 生成的二维码的深色部分
colorLight: "#ffffff", //生成二维码的浅色部分
correctLevel: QRCode.CorrectLevel.H
})
this.downloadQRCode()
},
downloadQRCode () {
let qrcode = document.getElementById('qrcode');
let img = qrcode.getElementsByTagName('img')[0];
img.onload = function () {
this.imgUrl = img.getAttribute("src");
let link = document.createElement("a");
link.setAttribute("href", this.imgUrl);
link.setAttribute("download", '123.png')
link.click();
}
}
}
}
</script>

<style lang='less'>
</style>