如何通过JavaScript Fetch API获取服务器生成的下载文件名？

没问题！要实现从服务器返回的Content-Disposition头里拿到文件名，然后自动把文件保存到用户设备，你可以按照下面的步骤来操作：

第一步：解析Content-Disposition头获取文件名 #

服务器返回的Content-Disposition头通常格式是这样的：

attachment; filename="report_2024.pdf"

我们需要写一个小函数来提取里面的filename值，还要考虑一些特殊情况（比如不带引号、或者带编码的filename*格式）：

function getFileNameFromContentDisposition(header) {
  // 处理带filename*的UTF-8编码格式文件名
  const encodedMatch = header.match(/filename\*=UTF-8''([\w%\-.]+)/);
  if (encodedMatch) {
    return decodeURIComponent(encodedMatch[1]);
  }

  // 处理普通的filename格式（带/不带引号都兼容）
  const normalMatch = header.match(/filename="?([^"]+)"?/);
  if (normalMatch) {
    return normalMatch[1];
  }

  // 如果都匹配不到，返回默认文件名
  return 'downloaded_file';
}

第二步：结合Fetch API实现完整下载流程 #

接下来把这个解析函数和Fetch请求结合起来，拿到文件Blob后，通过创建临时的<a>标签来触发浏览器的下载行为：

async function downloadFileFromServer(url) {
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    // 获取Content-Disposition头
    const contentDisposition = response.headers.get('Content-Disposition');
    let fileName = 'downloaded_file';
    
    if (contentDisposition) {
      fileName = getFileNameFromContentDisposition(contentDisposition);
    }

    // 将响应转为Blob对象
    const blob = await response.blob();

    // 创建临时URL和a标签
    const blobUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = fileName; // 设置下载的文件名

    // 触发点击（部分浏览器需要将元素添加到DOM才生效）
    document.body.appendChild(a);
    a.click();

    // 清理资源，避免内存泄漏
    document.body.removeChild(a);
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('下载出错：', error);
    alert('文件下载失败，请稍后重试');
  }
}

// 调用示例
downloadFileFromServer('/api/generate-report');

关键注意事项 #

• 跨域请求的头权限：如果你的请求是跨域的，服务器必须在Access-Control-Expose-Headers响应头里添加Content-Disposition，否则客户端无法读取这个头信息。
• 兼容性处理：上面的代码在现代浏览器（Chrome、Firefox、Edge等）都能正常工作；如果需要兼容IE，得用navigator.msSaveBlob方法替代<a>标签逻辑，可以在代码里加个判断：

  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, fileName);
  } else {
    // 上面的a标签触发逻辑
  }
  

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