JS - Change href and trigger image download when link is clicked

Question

I'm trying to download an image using the download attribute on an <a> tag. Its href value is updated when it is clicked.

function Download_Image(element) {
  var mydiv = $("#imageDiv");
  var Image = mydiv[0].children;
  
  mydiv.download = Image[0].src;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="imageDiv">
  <img
    width="200"
    height="140"
    src="https://2.bp.blogspot.com/-pjQRansD-ig/XAUEH2oe8tI/AAAAAAAAHwE/BgZOyaGnQLYhH2Zjxx86BRvyOs8o9yGjgCLcBGAs/s200/16e3d864-8fb8-4f43-b91e-cc97a75c602f.jpg" />
</div>

<a href="#" onclick="Download_Image(this)" download>Click here to download image</a>

However, when I click the link, it downloads the whole HTML page instead of the image.

Because `.download` should be for `` element, and not for `
`. Check here: https://stackoverflow.com/a/23013574/1346234 — Justinas, Dec 03 '18 at 11:57
Possible duplicate of [How can I create download link in HTML?](https://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html) — vsync, Dec 03 '18 at 12:38

Danziger · Answer 1 · 2018-12-03T12:41:50.827

You need to change the href attribute of the <a> element, not the download attribute of the <div>.

Anyway, the download attribute is not supported in all browsers and might not work in some others if the Content-Disposition: attachment header is not set.

For example, if we use an image from Instagram with the following code, it will only work if you append ?dl=1 at the end of the URL:

const links = document.getElementById('links');
const image = document.getElementById('image');

links.onclick = (e) => {
  const link = e.target;
  
  if (link.tagName !== 'A') {
    return;
  }
    
  link.href = `${ image.src }${ link.innerText.includes('WITHOUT') ? '' : '?dl=1' }`;
}

body {
  height: 100vh;
  margin: 0;
  font-family: monospace;
  display: flex;
  align-items: center;
}

#image {
  margin: 8px;
  height: calc(100vh - 16px);
}

#links {
  display: flex;
  flex-direction: column;
}

#links > a {
  display: block;
  padding: 8px;
  line-height: 14px;
  margin: 4px 0;
  color: black;
  text-decoration: none;
  border: 3px solid black;
  border-radius: 2px;
}

#links > a:hover {
  background: yellow;
}

<img id="image" src="https://scontent-mad1-1.cdninstagram.com/vp/e96d73e7938825335c235baedb51e91a/5CAAC2D4/t51.2885-15/e35/46060357_1380937935382732_6380498939567322752_n.jpg" />

<div id="links">
  <a href="#" download> WITHOUT HEADER</a>
  <a href="#" download> WITH HEADER</a>
</div>

You could take a look at a library called download.js.

JS - Change href and trigger image download when link is clicked

1 Answers1