Gerando um código QRCode e realizando o download dele

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)
  })
}

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)
}

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)
}

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>
  )
}