如何让HTML中的Anchor标签直接下载JSON文件而非跳转新标签页

你使用带download属性的<a>标签尝试下载GitHub上的JSON文件，但点击后会跳转到新标签页显示文件内容，无法触发下载。你的代码如下：

<a href="https://raw.githubusercontent.com/HarshNarwariya/DSA/master/Blind%2075%20Must%20Do%20Leetcode/Leetcode%2075%20Problems.json" download>Download Data</a>

问题原因 #

GitHub Raw文件服务器返回的HTTP响应头中，Content-Type被设为application/json，且没有添加Content-Disposition: attachment头。浏览器识别这是可预览的文本类型，同时因为资源是跨域的，浏览器会忽略<a>标签的download属性，优先遵循服务器返回的响应头，所以直接打开文件而非触发下载。

解决方案 #

方案一：前端JavaScript处理（纯前端实现）

通过fetch API获取文件内容，转成Blob对象后生成临时URL，再触发下载。代码示例：

<a id="downloadBtn" href="#">Download Data</a>

<script>
document.getElementById('downloadBtn').addEventListener('click', async (e) => {
  e.preventDefault();
  try {
    // 获取文件内容
    const res = await fetch('https://raw.githubusercontent.com/HarshNarwariya/DSA/master/Blind%2075%20Must%20Do%20Leetcode/Leetcode%2075%20Problems.json');
    const blob = await res.blob();
    // 创建临时下载URL
    const tempUrl = URL.createObjectURL(blob);
    // 创建临时a标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = tempUrl;
    downloadLink.download = 'Leetcode 75 Problems.json'; // 指定下载后的文件名
    document.body.appendChild(downloadLink);
    downloadLink.click();
    // 清理资源
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(tempUrl);
  } catch (err) {
    console.error('下载出错:', err);
  }
});
</script>

方案二：后端代理（需自有服务器）

如果有自己的后端服务，可以搭建一个代理接口：

• 后端请求GitHub的JSON文件
• 在返回给前端的响应中添加头：Content-Disposition: attachment; filename="Leetcode 75 Problems.json"
• 前端的<a>标签指向这个代理接口，浏览器就会触发下载。

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