前端生成二维码并下载（PC端）

一、二维码的生成

1.引入

npm install angular2-qrcode

2.模块引入

import { QRCodeModule } from 'angular2-qrcode';
 
@NgModule({
  imports: [
    ...
    QRCodeModule,
    ...
  ],
  declarations: [,
  exports: [
    ...
    QRCodeModule
    ...
  ]
})

3.页面引用

<qr-code [value]="'All QR Code data goes here!'" [size]="150"></qr-code>

4.Parameters

二、二维码下载

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，完成。