如何在仍然能够下载其内容的同时阻止元素跳转到新页面？

Question

function downloadStuff(theLink) {
  var link = document.createElement('a');
  link.href = theLink
  link.download = 'Download';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

downloadStuff('https://media.istockphoto.com/photos/carrot-isolated-on-white-picture-id1157946850?k=6&m=1157946850&s=612x612&w=0&h=3dZtC10gyHO3CudANa8KF92WRBz1l1vq4LEoVjeOBEM=')

If you run this code in a new tab it will only jump to that page. It only works if you run the code with the image already open. How can I stop the link.click() from jumping to the link while still having the image be downloaded? (I know this wouldn't work if it was from a different domain because of CORS).

Answer 1

Anchor element docs says " download only works for same-origin URLs, or the blob: and data: schemes ".

So if CORS allow it, you can fetch the resource, create the URI from the blob and then download it:

async function downloadStuff(theLink) {
    const result = await fetch(theLink);
    const blob = await result.blob();
    const link = document.createElement('a');
    
    link.href = URL.createObjectURL(blob);
    link.download = 'Download';
    
    document.body.appendChild(link);
    link.click();
    link.remove();
}

downloadStuff('https://media.istockphoto.com/photos/carrot-isolated-on-white-picture-id1157946850?k=6&m=1157946850&s=612x612&w=0&h=3dZtC10gyHO3CudANa8KF92WRBz1l1vq4LEoVjeOBEM=');