Javascript 使生成的二维码可在react项目上下载

我想做的是根据设备Id生成一个二维码，以便以后下载。我知道了如何生成它，它在页面上显示OK，一切正常，但是有没有可能的方法下载它？（QR图像，它是一个.png）

从'QRCode.react'导入QRCode；
render（）{
返回(
)};

这就是我所做的：

这就是我想做的：

---

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

---

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

---

我想出了方法，下面是代码：

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";
}

从'QRCode.react'导入QRCode；
建造师（道具）{
超级（道具）；
this.download=this.download.bind（this）；
}
componentDidMount（）{
这个。下载（）
}
render（）{
返回(
//隐藏分区
this.downloadRef=ref}>
下载二维码
)};
下载（）{
const canvas:any=document.querySelector（'.HpQrcode>canvas'）；
this.downloadRef.href=canvas.toDataURL（）；
this.downloadRef.download=this.state.values.deviceId+“-QR.png”；
}

我找到了方法，下面是代码：

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";
}

从'QRCode.react'导入QRCode；
建造师（道具）{
超级（道具）；
this.download=this.download.bind（this）；
}
componentDidMount（）{
这个。下载（）
}
render（）{
返回(
//隐藏分区
this.downloadRef=ref}>
下载二维码
)};
下载（）{
const canvas:any=document.querySelector（'.HpQrcode>canvas'）；
this.downloadRef.href=canvas.toDataURL（）；
this.downloadRef.download=this.state.values.deviceId+“-QR.png”；
}

我找到了下载二维码的最简单方法

我找到了下载二维码的最简单方法

库在画布上生成二维码，因此，搜索有关将画布导出为图像的问题可能会有所帮助-我建议将npm上的库“canvas to blob”和“file saver”链接在一起，库会在画布上生成二维码，因此，搜索有关将画布导出为图像的问题可能会有所帮助-我建议将npm上的库“canvas to blob”和“file saver”链接在一起。我不知道如何使用FileSaver执行此操作。它是否创建了画布或img？如果img在使用您提供的id呈现qr代码元素后获得qr代码元素，然后使用其src/img ref，然后创建一个链接，当重新装配创建画布时，我会继续尝试找出它，会发布答案吗？这个链接有帮助吗？我不知道如何使用FileSaver创建画布还是img？如果img在使用您提供的id呈现qr代码元素后获得qr代码元素，然后使用其src/img ref，然后创建一个链接，当重新装配创建画布时，我会继续尝试找出它，会发布答案吗？这个链接有帮助吗？