前端实现生成二维码展示与下载 react

qrcode.react 插件

地址：https://www.npmjs.com/package/qrcode.react

使用代码：

import QRCode from "qrcode.react";

const qrEl = document.getElementById("qrEl");
const image = new Image();
image.src = qrEl.toDataURL("image/png");
const url = image.src;  // 这个url 赋值给a标签就能操作下载 js方法 a.click()
setDowloadUrl(url);

直接将要生成二维码的内容赋值给QRCode组件的value属性就能生成二维码了
<QRCode id="qrEl" value={qrUrl} />  
<a download href={dowloadUrl}>
  <Button type="primary">
    保存二维码
  </Button>
</a>