Creating a button to download QR images (goqr.me API)

Question

I am trying to include dinamically created QR Code images in my website, using http://goqr.me/ API.

I'd like to create a button to download the image, using the download attribute in an hyperlink, but instead of downloading the image it opens it in the browser.

My code is as follows:

<div class="card" style="width: 20rem;">
  <img class="card-img-top mx-auto mt-4" style="width: 150px;" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&amp;data=https://example.com" alt="Card image cap">
  <div class="card-body">
     <h4 class="card-title">QR Code</h4>
    <p class="card-text">Download your code by clicking on the button below</p>
    <a download="qrcode.png" href="https://api.qrserver.com/v1/create-qr-code/?size=150x150&amp;data=https://example.com" class="btn btn-info">Download QR Code</a>
  </div>
</div>

What am i doing wrong?

Answer 1

I found the solution here. Here's my working code:

HTML:

<div class="card" style="width: 20rem;">
<img class="card-img-top mx-auto mt-4" style="width: 150px;" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&amp;data=https://example.com" alt="Card image cap">
<div class="card-body">
   <h4 class="card-title">QR Code</h4>
  <p class="card-text">Download your code by clicking on the button below</p>
  <button id="qrdownload" class="btn btn-info">Download QR Code</button>
</div>
</div>

JS:

<script type="text/javascript">
$('#qrdownload').click(function() {
  var qrCodeBaseUri = 'https://api.qrserver.com/v1/create-qr-code/?',
      params = {
          data: 'https://example.com',
          size: '150x150',
          margin: 0,
          download: 1
      };
  window.location.href = qrCodeBaseUri + $.param(params);        
});
</script>

Note: Put the JS code after the JQuery import link.