Safari浏览器扩展：JavaScript实现文件下载的异常问题求助

问题回顾 #

我现在在做浏览器扩展的文件下载功能，其他浏览器都正常，但在Safari里不是下载文件，而是直接在新标签页打开，用URI作为地址。以下是我当前的实现代码：

axios
  .get(`http://localhost:3000/api/download`, {
    params: { url },
    responseType: "blob",
  })
  .then((response) => {
    const disposition = response.headers["content-disposition"];
    let filename = "test.mp3";
    if (disposition && disposition.indexOf("attachment") !== -1) {
      const matches = /filename="([^"]*)"/.exec(disposition);
      if (matches != null && matches[1]) {
        filename = matches[1];
      }
    }
    const blob = response.data;

    const reader = new FileReader();
    reader.onloadend = () => {
      const link = document.createElement("a");
      link.href = reader.result; 
      link.download = filename;

      document.body.appendChild(link);

      link.click();
      document.body.removeChild(link);
    };
    reader.readAsDataURL(blob);
  })
  .catch((error) => {
    console.error("Download failed:", error);
  })
  .finally(() => {
    spinner.classList.add("hidden");
    downloadBtn.classList.remove("hidden");
  });

解决方案 #

我之前在Safari上踩过完全一样的坑，核心问题是Safari对download属性的处理逻辑和Chrome/Firefox不同，且通过FileReader.readAsDataURL生成的Data URL更容易被Safari直接解析打开，而非触发下载。给你两个经过验证的修复方案：

方案1：用Blob URL替代Data URL（首选） #

Safari对window.URL.createObjectURL生成的Blob URL支持更友好，不需要经过FileReader转换，直接就能配合download属性触发下载。修改后的核心代码如下：

axios
  .get(`http://localhost:3000/api/download`, {
    params: { url },
    responseType: "blob",
  })
  .then((response) => {
    const disposition = response.headers["content-disposition"];
    let filename = "test.mp3";
    if (disposition && disposition.indexOf("attachment") !== -1) {
      const matches = /filename="([^"]*)"/.exec(disposition);
      if (matches != null && matches[1]) {
        filename = matches[1];
      }
    }
    const blob = response.data;

    // 关键修改：用Blob URL替代Data URL
    const blobUrl = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = blobUrl;
    link.download = filename;

    document.body.appendChild(link);

    // 针对Safari：先触发focus再click，确保下载逻辑被正确触发
    link.focus();
    link.click();

    // 延迟清理资源，避免Safari还在处理下载时就释放Blob URL
    setTimeout(() => {
      document.body.removeChild(link);
      window.URL.revokeObjectURL(blobUrl);
    }, 200);
  })
  .catch((error) => {
    console.error("Download failed:", error);
  })
  .finally(() => {
    spinner.classList.add("hidden");
    downloadBtn.classList.remove("hidden");
  });

方案说明

• Blob URL是浏览器生成的本地资源引用，比Data URL更轻量，且Safari对其download属性的优先级识别更准确，不会直接打开文件；
• 新增link.focus()是因为Safari在某些场景下，未获得焦点的元素点击事件可能无法触发下载逻辑；
• 用setTimeout延迟清理资源，是为了给Safari足够的处理时间，避免提前释放Blob URL导致下载失败。

方案2：兜底处理（极端旧版Safari场景） #

如果方案1在某些极旧版本的Safari中仍不生效，可以添加浏览器判断，兜底提示用户手动保存：

// 在link.click()之后追加以下代码
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
  alert("Safari可能会直接打开文件，请按Cmd+S手动保存到本地");
}

额外注意事项 #

1. 后端Header检查：确保后端返回的Content-Disposition头格式为attachment; filename="xxx.mp3"，如果是inline类型，Safari会强制打开文件而非下载；
2. 扩展权限配置：如果是浏览器扩展，务必在manifest.json中申请downloads相关权限，Safari对扩展的权限管控比其他浏览器更严格。

备注：内容来源于stack exchange，提问作者Zirek