Ajax请求返回下载文件或错误HTML片段的处理方法咨询

核心思路是区分响应类型，优先通过后端返回的响应头做判断，兜底可通过内容特征识别，两种情况分别对应下载逻辑和错误插入逻辑。

最优实现（需后端配合，准确率最高） #

后端在返回结果时通过Content-Type响应头标记内容类型：

• 返回错误HTML时设置：Content-Type: text/html; charset=utf-8
• 返回下载文件时设置对应文件类型（通用可设Content-Type: application/octet-stream），同时增加Content-Disposition: attachment; filename="自定义文件名.后缀"标记为下载文件
  前端完整代码如下：

$.ajax( { 
   url: url, 
   data: dialogFormData,
   method: 'POST',
   // 统一按二进制格式接收响应，避免文件内容乱码
   xhrFields: {
    responseType: 'blob'
   },
   success: function(data, status, xhr) {
    const contentType = xhr.getResponseHeader('Content-Type');
    // 判断返回的是HTML错误
    if (contentType.includes('text/html')) {
      // 将blob类型的HTML转为文本插入对话框
      const reader = new FileReader();
      reader.onload = function() {
        // 替换为你的对话框容器选择器
        $('#dialog-container').html(reader.result);
      }
      reader.readAsText(data, 'utf-8');
      return;
    }
    // 处理文件下载逻辑
    // 从响应头提取文件名，提取失败用默认名
    const disposition = xhr.getResponseHeader('Content-Disposition');
    let fileName = 'download';
    if (disposition && disposition.indexOf('filename=') !== -1) {
      fileName = decodeURIComponent(disposition.split('filename=')[1].replace(/"/g, ''));
    }
    // 生成临时下载链接触发浏览器下载
    const blobUrl = window.URL.createObjectURL(data);
    const downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = fileName;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    // 清理临时资源
    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(blobUrl);
   },
   // 处理网络、服务端报错等请求级异常
   error: function() {
    $('#dialog-container').html('<p>请求异常，请稍后重试</p>');
   }
});

兜底实现（无需后端修改） #

如果没法调整后端响应头，可通过内容特征识别：HTML内容一定以<开头，二进制文件不会出现该特征，代码调整如下：

// 仅需修改success内的判断逻辑
success: function(data, status, xhr) {
  const testReader = new FileReader();
  testReader.onload = function() {
    const contentStart = testReader.result.slice(0, 1);
    if (contentStart === '<') {
      // 是HTML错误，直接插入
      $('#dialog-container').html(testReader.result);
    } else {
      // 是文件，走下载逻辑
      const disposition = xhr.getResponseHeader('Content-Disposition');
      let fileName = 'download';
      if (disposition && disposition.indexOf('filename=') !== -1) {
        fileName = decodeURIComponent(disposition.split('filename=')[1].replace(/"/g, ''));
      }
      const blobUrl = window.URL.createObjectURL(data);
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.download = fileName;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
      window.URL.revokeObjectURL(blobUrl);
    }
  }
  testReader.readAsText(data.slice(0, 1), 'utf-8');
}

大文件适配方案 #

如果下载的文件体积较大，AJAX加载全量内容会占用过多内存，可换成隐藏表单提交+Cookie轮询的方案：

1. 前端创建隐藏表单，动态插入表单字段提交设置参数
2. 后端如果返回错误，将错误内容写入Cookie，返回空响应
3. 前端轮询Cookie是否有错误标识，有则读取错误内容插入对话框，清空Cookie
4. 如果后端返回下载文件，浏览器会自动触发下载，不会刷新当前页面

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