qrcode.react二维码生成与下载

一.组件安装

npm install qrcode.react --save　

组件参考文档：qrcode.react参考文档
二.使用
1.引用组件

import QRCode  from 'qrcode.react';

2.使用

<QRCode
                id={"qrcode"}  //元素id
                includeMargin={true}//
                imageSettings={this.state.qrImageSettings}//设置二维码logo
                value={this.state.qrUrl}  //value参数为生成二维码的链接
                fgColor="#000000"  //二维码的颜色
  />

3.二维码下载

  ClickDownLoad=(codeid,e)=>{
    let Qr = document.getElementById(codeid);
    downloadcanve.downLoadCanver(Qr)
  },
  downLoadCanver(canvas){
    this.downLoad(this.saveAsPNG(canvas));
  },
  //模拟a标签href下载
  downLoad(url){
    let a = document.createElement("a");
    a.download = '';// 设置下载的文件名，默认是'下载'
   	a.href = url;
    document.body.appendChild(a);
    a.click();
   	a.remove(); // 下载之后把创建的元素删除
  },
  // 保存成png格式的图片
  saveAsPNG(canvas) {
    return canvas.toDataURL("image/png");
  }

三.注意事项
下载有logo的二维码时，要注意imageSettings的src需要给一个不跨域访问的地址，否则上面的saveAsPNG方法会报错。
我这里使用的是项目内的图片，图片放在了项目src下的assets文件夹中。
使用时页面先引用改图片

import logo from '../../../../assets/logo.png';

qrImageSettings:{
      src:logo,
      width:30,
      height:30
    }