点击带download属性的a标签包裹图片仅跳转不下载如何解决

问题原因 #

<a> 标签的 download 属性仅对同源资源生效，当 href 指向的资源与当前站点域名不同源时，浏览器会直接忽略 download 属性，跳转打开资源而非触发下载。

解决方案 #

方案1：配置资源响应头（兼容性最优） #

给目标图片的服务端响应头添加 Content-Disposition 字段：

Content-Disposition: attachment; filename="temp.jpg"

配置完成后无需修改前端原有代码，无论资源是否跨域，浏览器都会直接触发下载。

方案2：前端通过Blob转存实现下载 #

如果无法修改服务端配置，可通过JS将图片转成Blob对象后触发下载，前提是图片服务端已配置CORS规则允许当前站点访问资源。
修改后的代码示例：

<a id="downloadLink" download="temp.jpg" href="https://codedecoder.pythonanywhere.com/media/embed/2021/10/07/temp.jpg">
  <img loading="lazy" src="https://codedecoder.pythonanywhere.com/media/embed/2021/10/07/temp.jpg">
</a>

<script>
document.querySelector('#downloadLink').addEventListener('click', function(e) {
  // 阻止默认跳转行为
  e.preventDefault()
  const resourceUrl = this.href
  const saveFilename = this.download

  fetch(resourceUrl)
    .then(res => res.blob())
    .then(blob => {
      // 生成临时本地资源链接
      const tempUrl = URL.createObjectURL(blob)
      const trigger = document.createElement('a')
      trigger.href = tempUrl
      trigger.download = saveFilename
      trigger.style.display = 'none'
      document.body.appendChild(trigger)
      trigger.click()
      // 释放内存
      document.body.removeChild(trigger)
      URL.revokeObjectURL(tempUrl)
    })
    .catch(err => console.error('下载失败，请检查CORS配置：', err))
})
</script>

内容的提问来源于stack exchange，提问作者RoyalBosS