TGViewer
React JS React JS @react_tg · 16.2K subscribers
Post #490 4.17K
🖥 Как создать 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
  • ❤ 16
  • 👍 8
  • 🔥 4
More from @react_tg
  1. Oct 2, 2026🔥 Claude Code теперь можно менять изнутри Anthropic представила Mods: небольшие функции н…
  2. Oct 1, 2026Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙 .pop { view-t…
  3. Oct 1, 2026👨‍💻 Фронтенд с AI: что можно делегировать агентам 5 октября, стартует конференция Podlod…
  4. Oct 1, 2026Совет по JavaScript💡 Легко и правильно отображайте цены.
  5. Sep 29, 2026🌦️ Красивый пример того, как может выглядеть современное приложение на Aspire Команда пок…
  6. Sep 24, 2026Temperature displays Индикаторы - это svg-картинки, параметры которых задаются в JS. https…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →