React 生成二维码_react生成二维码图片

使用qrcode.react

安装依赖库

npm install qrcode.react
 
//
yarn add qrcode.react

代码实现

import React, { Component } from 'react';
import { Modal} from 'antd';
 
const QRCode = require('qrcode.react');
 
class QRCodeModal extends Component {
 
    constructor(props) {
        super(props)
        this.state = {
            qrCodeStr: '20220119QRCODE'
        }
    }
 
    downloadQrCode = () => {
        const canvasImg = document.getElementById('qrCode'); 
        const img = new Image();
        img.src = canvasImg.toDataURL('image/png'); 
        const downLink = document.getElementById('down_link');
        downLink.href = img.src;
        downLink.download = this.state.qrCodeStr;
    }
 
    render() {
        return (
            <Modal
                title={i18n.t('charger.qrcode')}
                width={500}
                visible={this.props.qrCodeVisible}
                onOk={this.handleCancel}
                onCancel={this.handleCancel}
                footer={[]}>
                <div className='bm bm-f1 bm-pc bm-ac bm-ver' style={{marginTop: 30}}>
                    <QRCode value={this.state.qrCodeStr} size={256} id="qrCode" />
                    <a id="down_qacode" 
                       onClick={this.downloadQrCode} 
                       style={{
                            fontSize: 16, 
                            marginTop: 20, 
                            width: 256, 
                            textAlign: 'center', 
                            paddingTop: 10, 
                            paddingBottom: 10, 
                            border: '1px solid'}}>
                        下载二维码
                    </a>
                </div>
            </Modal>
    )}
 
}
 
export default QRCodeModal

效果如下：

点击下载：