Edge浏览器中a标签download属性搭配相对路径无法正常工作

针对你遇到的Edge浏览器点击保存无响应的问题，我之前处理过类似的兼容性场景，给你几个可行的解决方案：

1. 为download属性指定明确的文件名 #

你当前代码中download=""是空值，Edge浏览器对空的download属性解析逻辑和其他浏览器存在差异，尤其是在处理同源相对路径文件时。尝试给download属性设置具体的文件名，让浏览器明确知道保存的文件名称：

<a class="atm-context_menu_item " download="topiclist.json" href="../../mocks/modules/topiclist/topiclist.json" data-context-menu="item">
  <svg class="icon atm-context_menu_item__icon">
    <use xlink:href="#download"></use>
  </svg>
  <span class="visuallyhidden">Download</span>
  <span class="atm-context_menu_item__label">Sprache</span>
</a>

这个调整是最常见的修复手段，很多Edge的download属性异常都是因为空值导致的。

2. 将相对路径转换为绝对路径 #

Edge对相对路径结合download属性的处理可能存在解析偏差，即便是文件确实存在，也可能因为路径解析问题导致保存无响应。可以通过JavaScript动态将相对路径转为完整的同源绝对路径：

// 获取下载链接元素
const downloadAnchor = document.querySelector('a.atm-context_menu_item');
// 生成绝对URL
const absoluteHref = new URL(downloadAnchor.href, window.location.origin).href;
// 更新链接的href属性
downloadAnchor.href = absoluteHref;

这样确保浏览器拿到的是完整的URL，避免相对路径带来的解析问题。

3. 检查Edge浏览器的下载配置 #

有时候浏览器本身的设置也会导致这个问题：

• 打开Edge设置，进入「下载」选项，确认下载目录拥有可读写权限，没有被设置为只读
• 尝试关闭「总是询问保存位置」选项，或者重置下载设置后重启浏览器测试
• 清除浏览器的缓存和下载历史，避免缓存异常干扰

4. 确认Edge的内核版本 #

如果你的Edge是旧版的EdgeHTML内核（而非现在的Chromium内核），确实存在download属性的兼容性bug，建议升级到最新的Chromium版Edge，这会解决大量旧版的兼容性问题。

内容的提问来源于stack exchange，提问作者Marcel Bührig