前端生成二維碼並下載（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，完成。