vue生成二维码下载

要在Vue中生成并下载二维码，你可以使用QRCode库来生成二维码，并使用HTML5的download属性来实现下载功能。首先，在你的Vue组件中引入QRCode库，然后在methods中添加两个方法：createQRCode和downloadQRCode。createQRCode方法用于生成二维码，而downloadQRCode方法用于下载二维码。在createQRCode方法中，你需要调用QRCode库的构造函数来生成二维码，并设置相应的参数，如文本内容、宽度、高度和颜色等。在downloadQRCode方法中，你需要获取生成的二维码图片元素，然后通过创建一个a标签并设置其href和download属性来实现下载功能。最后，你需要在模板中添加一个div元素用于显示二维码，并调用createQRCode方法生成二维码。下面是一个示例代码：

<template>
<div>
<div id="qrcode"></div>
<button @click="downloadQRCode">下载二维码</button>
</div>
</template>

<script>
import QRCode from 'qrcode'

export default {
methods: {
createQRCode() {
document.getElementById("qrcode").innerHTML = ""
let qrcode = new QRCode(document.getElementById("qrcode"), {
text: 'https://www.baidu.com/',
width: 188,
height: 188,
colorDark: "#666666",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
})
},
downloadQRCode() {
let qrcode = document.getElementById('qrcode');
let img = qrcode.getElementsByTagName('img');
img.onload = function () {
let imgUrl = img.getAttribute("src");
let link = document.createElement("a");
link.setAttribute("href", imgUrl);
link.setAttribute("download", '123.png')
link.click();
}
}
},
mounted() {
this.createQRCode()
}
}
</script>