JavaScript中如何将超阈值JSON响应转为浏览器默认文件下载？

核心思路 #

通过原生JS发起请求后，先读取响应头的Content-Length判断大小：

• 小于等于5MB时，直接解析JSON并执行业务逻辑
• 超过5MB时，将响应转为Blob并触发浏览器默认下载流程，之后提示用户后续操作

方案一：使用Fetch API（推荐，更简洁） #

Fetch API支持异步获取响应头和处理Blob，适合大多数现代浏览器场景：

const MAX_ALLOWED_SIZE = 5 * 1024 * 1024; // 5MB字节数
const targetUrl = '/your-api-endpoint';
const requestPayload = { /* 替换为你的POST请求数据 */ };

fetch(targetUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(requestPayload)
})
.then(response => {
  // 尝试获取响应长度
  const contentLengthHeader = response.headers.get('Content-Length');
  let shouldDownload = false;

  if (!contentLengthHeader) {
    // 无法获取长度时默认触发下载（比如分块传输场景）
    shouldDownload = true;
  } else {
    const contentSize = parseInt(contentLengthHeader, 10);
    shouldDownload = contentSize > MAX_ALLOWED_SIZE;
  }

  if (shouldDownload) {
    return response.blob();
  } else {
    // 解析小响应并处理业务逻辑
    return response.json().then(data => {
      // 这里写你原本处理小响应的代码，比如渲染数据、执行自动化操作
      console.log('自动处理完成:', data);
      alert('数据已自动处理完成');
      return null; // 标记无需下载
    });
  }
})
.then(blob => {
  if (blob) {
    // 触发浏览器下载
    const downloadUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    
    // 从响应头获取文件名，无则使用默认名
    const dispositionHeader = response.headers.get('Content-Disposition');
    let fileName = 'response-data.json';
    if (dispositionHeader) {
      const fileNameMatch = dispositionHeader.match(/filename="?([^"]+)"?/);
      if (fileNameMatch) fileName = fileNameMatch[1];
    }

    downloadLink.href = downloadUrl;
    downloadLink.download = fileName;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(downloadUrl);

    // 提示用户后续操作
    alert(`文件已开始下载，请打开下载的JSON文件，按照XX步骤完成原本自动处理的操作`);
  }
})
.catch(err => {
  console.error('请求处理失败:', err);
  alert('请求出错，请稍后重试');
});

方案二：使用XMLHttpRequest（兼容旧浏览器） #

如果需要兼容不支持Fetch的旧浏览器，可以用XHR实现：

const MAX_ALLOWED_SIZE = 5 * 1024 * 1024;
const targetUrl = '/your-api-endpoint';
const requestPayload = JSON.stringify({ /* 你的POST数据 */ });

const xhr = new XMLHttpRequest();
xhr.open('POST', targetUrl);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
  // 已获取响应头时判断大小
  if (xhr.readyState === 2) {
    const contentLengthHeader = xhr.getResponseHeader('Content-Length');
    let needDownload = false;

    if (!contentLengthHeader) {
      needDownload = true;
    } else {
      const contentSize = parseInt(contentLengthHeader, 10);
      needDownload = contentSize > MAX_ALLOWED_SIZE;
    }

    if (needDownload) {
      xhr.abort(); // 取消当前XHR请求
      
      // 创建隐藏表单提交请求，让浏览器处理下载
      const downloadForm = document.createElement('form');
      downloadForm.method = 'POST';
      downloadForm.action = targetUrl;
      downloadForm.style.display = 'none';

      // 添加请求数据（注意后端需对应接收该字段）
      const payloadInput = document.createElement('input');
      payloadInput.type = 'hidden';
      payloadInput.name = 'request-data';
      payloadInput.value = requestPayload;
      downloadForm.appendChild(payloadInput);

      document.body.appendChild(downloadForm);
      downloadForm.submit();
      document.body.removeChild(downloadForm);

      alert(`文件已开始下载，请打开下载的JSON文件，按照XX步骤完成原本自动处理的操作`);
      return;
    }
  }

  // 请求完成且成功时处理小响应
  if (xhr.readyState === 4 && xhr.status === 200) {
    try {
      const responseData = JSON.parse(xhr.responseText);
      console.log('自动处理完成:', responseData);
      alert('数据已自动处理完成');
    } catch (parseErr) {
      console.error('JSON解析失败:', parseErr);
      alert('数据解析出错，请重试');
    }
  }
};

xhr.send(requestPayload);

关键注意事项 #

• CORS配置：如果请求跨域，服务器必须设置Access-Control-Expose-Headers: Content-Length，否则前端无法读取Content-Length头
• 分块传输场景：如果响应使用Transfer-Encoding: chunked，Content-Length会缺失，此时代码会默认触发下载
• 文件名设置：后端可以通过Content-Disposition头指定文件名（如attachment; filename="large-data.json"），前端会自动识别
• 表单提交限制：XHR方案中用表单提交时，后端需要支持接收表单格式的数据；如果后端仅接受raw JSON，建议优先使用Fetch方案

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