带download属性的a标签未触发下载，反而打开文件网页

你的问题出在两个核心原因：

• download 属性对跨域资源可能失效：浏览器出于安全策略，不会强制下载来自第三方域名的文件；
• .srt 属于纯文本格式，浏览器默认会直接解析打开，而非触发下载。

修改代码实现正确下载逻辑 #

替换原代码中拼接HTML的部分，改为通过获取文件Blob对象生成同源下载链接的方式：

fetch(url_sub_download, options)
  .then(response => response.json())
  .then(response => {
    console.log(response);
    console.log(i, response.link);

    const sub_section = document.querySelector(".subtitle_section");
    // 创建字幕容器
    const subDiv = document.createElement("div");
    subDiv.className = `sub${i}`;
    subDiv.innerHTML = `<h3>Subtitle ${i}</h3>`;
    
    // 创建下载按钮
    const downloadBtn = document.createElement("a");
    downloadBtn.innerHTML = '<i class="fa-solid fa-download"></i>';
    downloadBtn.addEventListener("click", async (e) => {
      e.preventDefault();
      try {
        // 获取字幕文件的Blob数据
        const fileRes = await fetch(response.link);
        const blob = await fileRes.blob();
        // 生成同源的Blob URL
        const blobUrl = URL.createObjectURL(blob);
        // 配置下载属性（添加.srt后缀确保文件类型正确）
        downloadBtn.href = blobUrl;
        downloadBtn.download = `Subtitle ${i}.srt`;
        // 触发下载动作
        downloadBtn.click();
        // 释放Blob URL资源，避免内存泄漏
        URL.revokeObjectURL(blobUrl);
      } catch (err) {
        console.error("字幕下载失败:", err);
      }
    });
    
    subDiv.appendChild(downloadBtn);
    sub_section.appendChild(subDiv);
  })
  .catch(err => console.error(err));

关键改进点 #

1. 绕开跨域限制：通过fetch获取第三方文件的Blob对象，生成同源的Blob URL，让浏览器识别为本地资源，download 属性即可正常生效；
2. 明确文件类型：给download属性添加.srt后缀，强制浏览器识别为字幕文件，避免以纯文本形式打开；
3. 更安全的DOM操作：使用createElement创建元素代替innerHTML拼接，避免XSS风险和重复渲染问题。

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