Сделать сгенерированный QR-код доступным для загрузки в реактивном проекте

Question

Я пытаюсь сгенерировать 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";
}

Answer 2

Я нашел самый простой способ загрузить код qr здесь

Answer 3

Взгляните на FileSaver.js, он может создавать файлы из холста.

Ссылка