Vue實現(xiàn)二維碼的展示及下載功能

更新時間：2024年05月21日 11:17:32 作者：code袁

這篇文章主要介紹了Vue實現(xiàn)二維碼的展示及下載功能,其中downloadQRCode（）函數(shù)中的url為要下載的文件的路徑,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

1.安裝qrcode的組件

npm i qrcode

下載好的話在 package.json中就有

2.單頁頁面引入

import QRCode from "qrcode";

3.生成二維碼

1.注意生產(chǎn)二維碼的這個方法為異步請求。其次傳入的參數(shù)必須為字符串
2.其中getCode()方法中data為你要生成二維碼的數(shù)據(jù)
3.通過data.toString();將data數(shù)據(jù)轉化了字符串

//生產(chǎn)二維碼
    async getCode(data) {
      try {
        // 將數(shù)值型數(shù)據(jù)轉換為字符串類型
        const dataString = data.toString();
        const qrCodeData = await QRCode.toDataURL(dataString);
        return qrCodeData;
      } catch (error) {
        console.error("Error generating QR code:", error);
        // 可以根據(jù)具體情況進行錯誤處理，比如返回默認值或向用戶顯示錯誤信息
        return null;
      }
    },

4.傳參函數(shù)

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.實現(xiàn)的效果

在這里插入圖片描述

6.下載二維碼

其中downloadQRCode（）函數(shù)中的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);
    },