前端生成二維碼並下載(PC端)


最近項目(Vue)有個這樣的需求:

根據id生成收款二維碼(已經知道網址,需要拼接參數),用來提供給微信小程序掃碼支付,並且可以下載二維碼。

也就是說需要前端生成二維碼,並且可以下載。

一、解決方案:使用qrcode實現。

二、實現步驟:

1、安裝qrcode

npm install qrcode

2、引入qrcode

import QRCode from "qrcode";

3、定義下載方法,內容如下:

// 下載二維碼
downQrCode(item) {
  QRCode.toDataURL(`http://renewfee.xxx.cn?cardId=${item.id}`).then(
    imgData => {
      if (imgData) {
        let a = document.createElement("a");
        a.href = imgData;
        a.setAttribute("download", "二維碼.jpeg");
        a.click();
      }
    }
  );
}

4、觸發下載,這里示例的 item 是從循環里拿到的對象,可以根據自己的需求將值傳到方法里處理:

<button @click="downQrCode(item)">下載二維碼</button>

OK,完成。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM