JSFiddle - React, Tailwind, and code Playground

by Edi Carlos

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<div id="output"></div>
<script>
jQuery(function(){
  jQuery('#output').qrcode("http://");
   
  // the lib generate a canvas under target, you should get that canvas, not #output
  // And put the code here would ensure that you can get the canvas, and canvas has the image.
  var canvas = document.querySelector("#output canvas");
  var img = canvas.toDataURL("image/png");
  $(canvas).on('click', function() {
    // Create an anchor, and set its href and download.
    var dl = document.createElement('a');
    dl.setAttribute('href', img);
    dl.setAttribute('download', 'qrcode.png');
    // simulate a click will start download the image, and name is qrcode.png.
    dl.click();
  });
   
  // Note this will overwrite any current content.
  // document.write('<img src="'+img+'"/>');
})

</script>