生成二维码并支持下载

环境：

"react": "^16.8.6",

"antd": "^4.19.3",

"qrcode": "^1.5.1"

二维码插件：qrcode，

                      git地址：GitHub - soldair/node-qrcode: qr code generator 

                      npm地址：qrcode - npm (npmjs.com)

利用qrcode生成base64位图片地址，再放在图片展示出来

import React, { useState, useEffect, useContext, useCallback } from "react";
import { Image, Button, Modal } from 'antd'; // antd组件
import QRCode from 'qrcode'
import styled from '@emotion/styled' // 局部样式

const Box = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

const ModalQrcode = (props) => {
  const { visible, onCancel } = props
  const [imgurl, setImgurl] = useState('')

  const handleCancel = () => {
    console.log('取消')
    onCancel()
  }
  const codeDownLoad = (url, title) => {
    const link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    // link.href = document.querySelector(`#${chartId} canvas`).toDataURL();
    link.download = title;
    link.click();
    link.remove();
  }

  useEffect(() => {
    QRCode.toDataURL('I am a pony!', { width: 400 })
      .then(url => {
        console.log(url)
        setImgurl(url)
      })
      .catch(err => {
        console.error(err)
      })
  }, [])
  return (
    <Modal
      visible={visible}
      title="二维码"
      width={400}
      onCancel={handleCancel}
      maskClosable={false}
      footer={null}
    >
      <Box>
        <a href={imgurl} download>
            <Image
              width={400}
              src={imgurl}
              preview={false}
            />
        </a>
        <Button type="link" onClick={() => codeDownLoad(imgurl, '二维码')}>下载二维码</Button>
      </Box>
    </Modal>
  )
}

export default ModalQrcode;

完工。