使用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
效果如下:
点击下载: