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

Я пытаюсь создать QR код на основе идентификатора устройства, чтобы позже загрузить его. Я понял, как его сгенерировать, на странице отображается ОК, все в порядке, но есть ли способ его скачать? (QR-изображение, это .png)

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

Вот что я сделал:

Вот что я хочу сделать:

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

Эта библиотека генерирует QR-коды на холсте, поэтому поиск вопросов об экспорте холста в виде изображения может быть полезным - я бы порекомендовал связать библиотеки 'canvas-to-blob' и 'file-saver' вместе в npm.

— 03.05.2018 17:41

javascript reactjs download qr-code

03.05.2018 17:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

5 725

Ответы 3

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

Ссылка на сайт

Я не могу понять, как это сделать с FileSaver

— 03.05.2018 22:12

Создает холст или img? Если img, тогда получите элемент кода qr после того, как он был отрисован с использованием предоставленного вами идентификатора, затем используйте его src / img ref, а затем создайте и ссылку с ним в качестве ссылки

— 03.05.2018 22:22

Он создает холст, я буду пытаться разобраться, опубликую ответ

— 03.05.2018 22:59

Эта ссылка вообще помогает? github.com/zpao/qrcode.react/issues/37

— 03.05.2018 23:12

03.05.2018 17:45

Я понял, как это сделать, вот код:

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

04.05.2018 00:43

Нашел самый простой способ скачать qr код здесь

11.05.2019 07:31