HTML中a标签的download属性无法正常工作求助

针对你遇到的本地HTML文件中download属性失效、浏览器直接预览图片的问题，可按以下步骤排查解决：

• 使用本地HTTP服务器运行HTML文件
  Chrome对file://协议下的download属性有行为限制，直接打开本地HTML文件时，浏览器会优先预览可识别的媒体文件（如JPG）而非触发下载。你可以用简单的本地服务器来运行文件：

  • 若安装了Python，在HTML文件所在目录打开终端，执行：

    python -m http.server 8000
    

  • 然后在Chrome中访问http://localhost:8000/你的文件名.html，此时点击链接即可触发下载。

• 明确指定download属性的文件名
  给download属性添加具体文件名，能帮助浏览器明确识别下载行为，修改后的代码如下：

  <!DOCTYPE html>
  <html>
      <head>
          <title>Hello</title>
      </head>
      <body>
          <a href="./HG.jpg" download="HG.jpg">Download image</a>
          <!-- 避免target="_blank"与download搭配，会干扰下载触发逻辑 -->
          <a href="./HG.jpg" download="HG.jpg">Download image (无新标签)</a>
      </body>
  </html>
  

• 移除target="_blank"属性
  当target="_blank"与download同时使用时，新开标签页加载图片的行为会覆盖下载触发逻辑，尤其是在file://协议环境下，建议去掉该属性，优先保证下载功能正常。

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