如何使用Vue实现二维码生成及下载功能？

本文共计556个文字，预计阅读时间需要3分钟。

在Vue项目中，实现生成二维码并下载的功能，可以按照以下步骤进行：

1. 在项目中引入二维码库： javascript import QRCode from 'qrcodejs2';

2. 创建二维码： javascript createQRCode() { let qrcode=new QRCode('qrcode', { width: 100, height: 100, text: 'https://www.example.com' }); }

3. 将生成的二维码内容添加到页面中：

4. 在组件的`mounted`生命周期钩子中调用`createQRCode`方法： javascript mounted() { this.createQRCode(); }

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

引入 qrcode ：

import QRCode from "qrcodejs2"

生成二维码：

createQRCode () {
document.getElementById("qrcode").innerHTML = ""
let qrcode = new QRCode(this.$refs['qrCodeDiv'], {
text: '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: '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>