JavaScript AJAX返回文件内容时如何触发浏览器下载

你当前的代码仅将文件内容通过XHR拉取到了浏览器内存中，没有触发浏览器的文件保存逻辑，同时存在3个配置错误：

• Content-Type、Content-Disposition是服务端返回的响应头，作为请求方在前端设置这两个请求头没有任何作用，反而可能触发跨域预检请求失败
• 未指定XHR的响应格式为二进制类型，默认返回的文本格式会损坏PDF、Office文档、压缩包等二进制文件
• 拿到响应内容后没有生成临时下载入口，自然不会弹出下载保存窗口

把原有XHR逻辑替换为以下版本即可，代码内置了文件名解析、内存清理逻辑，避免内存泄漏：

// 初始化XHR时指定响应类型为blob，从根源避免二进制文件损坏
var xhrdoc = new XMLHttpRequest();
xhrdoc.open("GET", docURL1);
xhrdoc.setRequestHeader("Accept", "*/*");
// 仅保留必要的认证请求头，删除无效的Content-Type、Content-Disposition请求头设置
xhrdoc.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
xhrdoc.responseType = "blob";

xhrdoc.onload = function () {
  if (xhrdoc.status !== 200) {
    console.error("文件请求失败，状态码：", xhrdoc.status);
    return;
  }
  // 从响应头解析真实文件名，解析失败则使用默认文件名
  var disposition = xhrdoc.getResponseHeader("Content-Disposition");
  var fileName = "下载文件";
  if (disposition && disposition.indexOf("attachment") !== -1) {
    var fileNameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
    var match = fileNameRegex.exec(disposition);
    if (match != null && match[1]) {
      fileName = match[1].replace(/['"]/g, "");
      // 兼容中文文件名编码
      fileName = decodeURIComponent(escape(fileName));
    }
  }

  // 将返回的二进制内容生成临时可访问URL
  var blob = new Blob([xhrdoc.response], {
    type: xhrdoc.getResponseHeader("Content-Type") || "application/octet-stream"
  });
  var blobUrl = window.URL.createObjectURL(blob);

  // 创建临时a标签触发浏览器下载行为
  var downloadLink = document.createElement("a");
  downloadLink.href = blobUrl;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();

  // 清理临时DOM和临时URL，释放内存
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(blobUrl);
};

xhrdoc.onerror = function () {
  console.error("文件下载请求出错，请检查网络、跨域配置和认证信息有效性");
};

xhrdoc.send();

• 如果部署后出现跨域报错，需要在VBCS应用配置中添加Documentum服务的代理规则，不要直接从前端跨域调用Documentum接口，否则自定义认证头很容易被浏览器拦截
• 不要使用window.location.href = docURL1的跳转方式下载，这种方式无法携带自定义Basic认证头，会直接跳转到登录页或返回401错误
• 如果下载后的文件打开提示损坏，优先检查是否遗漏xhrdoc.responseType = "blob"配置，默认的text响应格式会把二进制字节转成UTF-8字符，直接破坏文件结构

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