前端生成二维码并下载（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，完成。