react 二维码 显示+下载

qrcode.react

安装

npm install qrcode.react --save

使用(显示+下载)

import { QRCodeCanvas } from 'qrcode.react';
...
<QRCodeCanvas
	id={'qr-' + render.id}
	value={defaultSettings.h5_url + render.id}
	size={600}
	fgColor="#000000"
 />
...
 <a
	onClick={() => {
    dowmQR(record);
    }}
 >
  下载二维码
 </a>
....

  const dowmQR = (row) => {
    let canvas = document.getElementById('qr-' + row.id);
    let name = '二维码';
    let href = canvas.toDataURL(); // 获取canvas对应的base64编码
    let a = document.createElement('a'); // 创建a标签
    a.download = name; // 设置图片名字
    a.href = href;
    a.dispatchEvent(new MouseEvent('click'));
  };