Vue实现二维码的展示及下载功能

npm i qrcode

import QRCode from "qrcode";

//生产二维码
    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;
      }
    },

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);
      });
    },

//下载二维码
    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);
    },