使生成的QR码可以在反应项目中下载

Question

我尝试做的是根据设备ID生成 QR码，以便以后下载。我想出了如何生成它，它在页面上显示OK，一切正常但是有没有可能的方法下载它？ （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";
}

Answer 2

我找到了下载二维码here

的最简单方法

Answer 3

看看FileSaver.js，它可以从画布创建文件。

Link