0

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?

Esquirish
  • 185
  • 1
  • 12
  • Per this answer, https://stackoverflow.com/a/49736875/1011984, you would need qrserver.com to include a Content-Disposition response header set to `attachment` (since they would be a cross-origin site) so your users would be prompted to save the image, but they don’t. What about generating QR codes on your own server? That would eliminate the cross-origin problem, and there is code on GitHub for [PHP](https://github.com/Bacon/BaconQrCode) and [Nodejs](https://github.com/soldair/node-qrcode) servers. – Rich DeBourke Apr 22 '21 at 01:55
  • @ Rich DeBourke thanks for the feedback, now it's clear to me why it wasn't working. I'd prefer relying on a third party to generate the codes, for performance reasons (the server my website is hosted in is low on resources). – Esquirish Apr 22 '21 at 02:38
  • Another option would be to do like this [QR code generator](https://keremerkan.net/qr-code-and-2d-code-generator/) and rather than showing your user their QR code and then giving them a button to download the image, have the QR code show the first time as a model and let the user figure out how to copy it or save it. If you user is savvy enough to be doing something with a QR code, they can probably figure out how to save the image, especially if it’s displayed as a modal. – Rich DeBourke Apr 22 '21 at 06:08

2 Answers2

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.

Esquirish
  • 185
  • 1
  • 12
0

Simply pass the parameter &download=1 and pass the api in href of anchor tag

let api = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${inputQR}&download=1`;

<a download="qr.png" href=""  id="qrDownload" class="btn btn-primary w-100 mt-2">Download QR Code</a>
Mahesh Paradkar
  • 1
  • 1