javascript - 使生成的二维码可在React项目上下载

Question

我想要做的是根据设备 ID 生成QR 码以便稍后下载。我弄清楚了如何生成它，它在页面上显示正常，一切正常，但是有没有可能的方法来下载它？ (QR 图像，它是 .png)

import QRCode from 'qrcode.react';
render() {
return (
<QRCode value={this.state.values.deviceId} />
)};

这就是我所做的:

这就是我想做的:

Answer 1

我知道怎么做了，这是代码:

import QRCode from 'qrcode.react';
constructor(props) {
    super(props);
this.download = this.download.bind(this);
}
componentDidMount(){
 this.download()
}
render() {
return (
 <div style={{display: "none"}} className="HpQrcode"> // hidden div
   <QRCode
     value={this.state.values._id}
     size={128}
     level={'H'}
   />
 </div>
  <a ref={(ref: any): any => this.downloadRef = ref}>
    Download QR Code
  </a>
)};
download() {
    const canvas: any = document.querySelector('.HpQrcode > canvas');
    this.downloadRef.href = canvas.toDataURL();
    this.downloadRef.download = this.state.values.deviceId + "-QR.png";
}