Solution 1 :

Not only it is possible to ‘download the image from a button’, but you can also download the image immediately after the API responds and then display it from a local URL.

const url = '';
const target = document.getElementById('target');
const link = document.getElementById('download');

const xhr = new XMLHttpRequest();

xhr.addEventListener('loadend', (e) => {
  const blobUrl = URL.createObjectURL(;
  target.src = blobUrl;
  link.href = blobUrl; = 'image.jpg';

xhr.responseType = 'blob';'GET', url);
<img id='target'></img>
<a id='download'>Download</a>

Problem :

I have this QR code generator that I pieced together from tutorials across the web. You can see it here. It replaces an image src in a div with the QR code generated from Google API based on input from the user, so doing doesn’t work, as the link is dynamic. Is there a way to download the image from a button?

I didn’t know what part of the code to attach to make it clear, so if you want to see the entire code, visit the GitHub repository:

Thanks for your help!


Comment posted by

Hi, I tried adding that into my code, but it is not working, can you take a look?

Comment posted by

@AbidRasheed already did. Sorry if I took the liberty of copying and modifying your code. Please see

Comment posted by Abid Rasheed

I have one problem, how can I make it download as the name.png? right now it is just doing qr.png

Comment posted by Ernesto Stifano

@AbidRasheed just replace

Comment posted by Abid Rasheed

yes i figured it out thank you but there is a problem. The QR is supposed to generate “name,phone,email” but it is adding symbols that is not supposed to be there. It is generating a QR that says