Question

我正在尝试使用download标签上的<a>属性下载图像。单击它的href值会更新。

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>

但是，当我单击链接时，它将下载整个HTML页面而不是图像。

Answer 1

您需要更改href元素的<a>属性，而不是download的{{1}}属性。

无论如何，<div>属性为is not supported in all browsers，如果未设置download标头，则在某些其他属性中可能无法使用。

例如，如果我们使用带有以下代码的Instagram图片，则仅在URL末尾附加Content-Disposition: attachment才能使用：

?dl=1

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;
}

您可以看一下名为download.js的库。

JS-单击链接时更改href并触发图像下载

1 个答案: