Vue实现二维码的展示及下载功能
作者：code袁
这篇文章主要介绍了Vue实现二维码的展示及下载功能,其中downloadQRCode（）函数中的url为要下载的文件的路径,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
1.安装qrcode的组件
npm i qrcode
下载好的话在 package.json中就有
2.单页页面引入
import QRCode from "qrcode";
3.生成二维码
1.注意生产二维码的这个方法为异步请求。其次传入的参数必须为字符串
2.其中getCode()方法中data为你要生成二维码的数据
3.通过data.toString();将data数据转化了字符串
//生产二维码
async getCode(data) {
try {
// 将数值型数据转换为字符串类型
const dataString = data.toString();
const qrCodeData = await QRCode.toDataURL(dataString);
return qrCodeData;
} catch (error) {
console.error("Error generating QR code:", error);
// 可以根据具体情况进行错误处理，比如返回默认值或向用户显示错误信息
return null;
}
},4.传参函数
getList() {
getSteat().then(async (res) => {
console.log(res.data.data);
let data = res.data.data.data;
let qrImg = [];
let qrCodePromises = data.map((item) => this.getCode(item.statusId));
let qrCodes = Promise.all(qrCodePromises);
for (let i = 0; i < data.length; i++) {
qrImg.push({
id: data[i].id,
img: qrCodes[i],
});
}
this.qrImg = qrImg;
this.tableData = data;
setTimeout(() => {
this.loading = false;
}, 200);
});
},5.实现的效果
6.下载二维码
其中downloadQRCode（）函数中的url为要下载的文件的路径
//下载二维码
downloadQRCode(url, name) {
const link = document.createElement("a");
link.href = url; //下载文件的url
link.download = `自习室座位${name}.png`; // 下载的文件名可以自定义
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},7.下载二维码实现效果
到此这篇关于Vue实现二维码的展示及下载的文章就介绍到这了,更多相关Vue二维码展示及下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！