Gerando um código QRCode e realizando o download dele

Exemplo utilizando as libs qrcode e qrcode-generator

Função utilizando a lib qrcode:

const usingQRCodeJS = () => {
    // https://github.com/soldair/node-qrcode#qr-code-options
    const errorCorrectionLevel = "M"; // Error correction level ('L', 'M', 'Q', 'H')
    const url = "https://valchan.com.br/";
    const opts = {
        errorCorrectionLevel,
        type: "image/jpeg", // Possible values are: image/png, image/jpeg, image/webp.
        quality: 1, // A number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.
        margin: 0, // Define how much wide the quiet zone should be.
        scale: 50
    };
    QRCode.toDataURL(url, opts, (err, urlResponse) => {
        console.log(urlResponse);
    });
};

Função utilizando a lib qrcode-generator:

const usingQRCodeGenerator = () => {
    // https://github.com/kazuhikoarase/qrcode-generator/tree/master/js
    const errorCorrectionLevel = "M"; // Error correction level ('L', 'M', 'Q', 'H')
    const url = "https://valchan.com.br/";
    const typeNumber = 0; // Type number (1 ~ 40), or 0 for auto detection.
    let qr = qrcodeGenerator(typeNumber, errorCorrectionLevel);
    qr.addData(url);
    qr.make();
    const urlResponse = qr.createDataURL(50, 0); // cellSize, margin
    console.log(urlResponse);
};

Função para baixar a imagem gerada:

const downloadImageFile = (urlFile) => {
    var link = document.createElement("a");
    link.href = urlFile; // url do arquivo
    link.download = "qrcode"; // nome do arquivo
    link.style.display = "none";
    document.body.appendChild(link);
    link.click(); // onde a mágica acontece
    document.body.removeChild(link);
};

Exemplo App.js:

import { useEffect, useState } from "react";

import QRCode from "qrcode";
import qrcodeGenerator from "qrcode-generator";

const errorCorrectionLevel = "M";
const url = "https://valchan.com.br/";

export default function App() {
  const [qrcode1, setQrcode1] = useState("");
  const [qrcode2, setQrcode2] = useState("");

  useEffect(() => {
    usingQRCodeJS();
    usingQRCodeGenerator();
  }, []);

  const usingQRCodeJS = () => {
    const opts = {
      errorCorrectionLevel,
      type: "image/jpeg",
      quality: 1,
      margin: 0,
      scale: 50
    };
    QRCode.toDataURL(url, opts, (err, urlResponse) => {
      setQrcode1(urlResponse);
    });
  };

  const usingQRCodeGenerator = () => {
    const typeNumber = 0;
    let qr = qrcodeGenerator(typeNumber, errorCorrectionLevel);
    qr.addData(url);
    qr.make();
    const urlResponse = qr.createDataURL(50, 0);
    setQrcode2(urlResponse);
  };

  const downloadImageFile = (urlFile) => {
    var link = document.createElement("a");
    link.href = urlFile;
    link.download = "qrcode";
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div>
      <strong>qrcode</strong>
      <img src={qrcode1} alt="Qrcode generated by qrcode lib" />
      <button onClick={() => downloadImageFile(qrcode1)}>Download</button>

      <strong>qrcode-generator</strong>
      <img src={qrcode2} alt="Qrcode generated by qrcode-generator lib" />
      <button onClick={() => downloadImageFile(qrcode2)}>Download</button>
    </div>
  );
}

Comentários