JSFiddle - React, Tailwind, and code Playground

by dont_panic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<div>
    <input type="text" id="qr-data" value="https://stackoverflow.com/q/70981018/6089612" />
    <button onclick="generateQR()">Generate</button>
    <a id="download" href="" download="qr.png"><button>Download</button></a>
    <div id="qrcode"></div>
</div>

JavaScript

var qrdata = document.getElementById("qr-data");
var qrcode = new QRCode(document.getElementById("qrcode"));
var link = document.getElementById("download");

function generateQR() {
    var data = qrdata.value;
    qrcode.makeCode(data);
}

// Add an event listener that will fire our code when the link is clicked
link.addEventListener("click", setUpDownload);

// Grab the generated img src, and copy it into the link href
function setUpDownload() {
    // Find the image inside the #qrcode div
    var image = document.getElementById("qrcode").getElementsByTagName("img");

    // Get the src attribute of the image, which is the data-encoded QR code
    var qr = image[0].src;

    // Copy that to the download link
    link.href = qr;
}