如何通过MVC的File()返回类型获取后端传递的文件名？

后端说明 #

你当前的ASP.NET MVC代码已经会自动在响应头中添加Content-Disposition字段，其中包含指定的文件名。比如调用File(filedata, "text/csv", "test.csv")时，响应头会生成：

Content-Disposition: attachment; filename=test.csv

如果是跨域请求，需要在后端配置允许前端访问这个响应头，否则前端无法读取。可在控制器方法中添加：

Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");

前端修改方案 #

需要调整请求逻辑，获取响应头中的Content-Disposition并解析出文件名，而非仅获取文件内容：

1. 修改请求封装（以axios为例） #

假设companyService.getCSVFile()基于axios封装，调整为返回完整响应对象：

// 在companyService中更新方法
async getCSVFile() {
  return await axios.get('/api/your-endpoint', {
    responseType: 'blob', // 确保获取二进制文件内容
    headers: { Accept: 'text/csv' }
  });
}

2. 解析文件名并调用下载 #

修改exportCSVData方法，从响应头提取文件名：

async exportCSVData(): Promise<void> {
  const response = await companyService.getCSVFile();
  
  // 解析Content-Disposition中的文件名
  const contentDisposition = response.headers['content-disposition'];
  let filename = 'default.csv';
  if (contentDisposition) {
    const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (matches?.[1]) {
      filename = matches[1].replace(/['"]/g, '');
    }
  }

  // 使用后端返回的文件名执行下载
  this.fileAutoDownload(response.data, filename);
}

3. 封装通用解析函数（可选） #

将解析逻辑抽离为复用函数：

extractFilenameFromHeader(contentDisposition: string): string {
  if (!contentDisposition) return 'default.csv';
  const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
  return matches?.[1]?.replace(/['"]/g, '') || 'default.csv';
}

核心原理 #

ASP.NET MVC的File方法会自动将第三个参数（下载文件名）写入Content-Disposition响应头，前端通过读取该头并正则匹配，即可获取后端指定的文件名。

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