React JS

🖥 Как создать QR-код по строке и направить его пользователю на скачивание?

Вот так звучит реальный кейс, давайте подробнее.
⏩При нажатии на кнопку (onClick событие) должен создаваться QR-код (превью для пользователя не нужно) по строке (рандомно генерирующийся набор символов) и отправляться на скачивание пользователю в виде png-картинки.
Как же это можно реализовать?

⏩Например, можно сделать так:

import QRCode from "https://esm.sh/qrcode";

function download(dataurl, filename) {
  const link = document.createElement("a");

  link.href = dataurl;
  link.download = filename;
  link.click();

  document.removeElement(link);
}

QRCode.toDataURL("I am a pony!", function (err, qrCodeImageDataUrl) {
  console.log(qrCodeImageDataUrl);

  download(qrCodeImageDataUrl, "qrcode.png");
});

📎 Затестить, как работает, можно тут

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

❤16👍8🔥4

www.tgoop.com/react_tg/490

4.14K viewsApr 4, 2024 at 13:02

🖥 Как создать QR-код по строке и направить его пользователю на скачивание?

Вот так звучит реальный кейс, давайте подробнее.
⏩При нажатии на кнопку (onClick событие) должен создаваться QR-код (превью для пользователя не нужно) по строке (рандомно генерирующийся набор символов) и отправляться на скачивание пользователю в виде png-картинки.
Как же это можно реализовать?

⏩Например, можно сделать так:

import QRCode from "https://esm.sh/qrcode";

function download(dataurl, filename) {
  const link = document.createElement("a");

  link.href = dataurl;
  link.download = filename;
  link.click();

  document.removeElement(link);
}

QRCode.toDataURL("I am a pony!", function (err, qrCodeImageDataUrl) {
  console.log(qrCodeImageDataUrl);

  download(qrCodeImageDataUrl, "qrcode.png");
});