Angular Swagger UI文件下载端点文件名异常问题求助

1. 确保后端返回正确的响应头 #

API必须在文件下载接口的响应中添加Content-Disposition头，格式如下：

Content-Disposition: attachment; filename="Test.txt"

原生Swagger UI会自动解析这个头获取文件名，Angular Swagger UI依赖该头完成正确的文件名识别。如果后端未设置此头，优先调整后端代码补全该响应头。

2. 自定义下载逻辑覆盖默认行为 #

针对该Angular Swagger UI示例，需修改组件内处理Blob下载的逻辑，手动从响应头提取文件名：

1. 找到组件中处理API响应下载的代码块（通常在请求完成后的回调或拦截器中）
2. 添加文件名解析与下载处理逻辑：

   // 从响应头提取文件名
   const extractFilename = (headers: HttpHeaders): string => {
     const contentDisposition = headers.get('Content-Disposition');
     if (!contentDisposition) return 'downloaded-file';
     
     const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
     return filenameMatch ? filenameMatch[1].replace(/['"]/g, '') : 'downloaded-file';
   };
   
   // 自定义下载处理
   const handleFileDownload = (blob: Blob, headers: HttpHeaders) => {
     const filename = extractFilename(headers);
     const url = window.URL.createObjectURL(blob);
     const link = document.createElement('a');
     
     link.href = url;
     link.download = filename;
     document.body.appendChild(link);
     link.click();
     
     window.URL.revokeObjectURL(url);
     document.body.removeChild(link);
   };
   

3. 将原有的默认下载逻辑替换为上述自定义方法，确保下载时传入响应头用于解析文件名。

3. 配置Swagger UI响应拦截器 #

通过Swagger UI的配置项添加响应拦截器，提前解析文件名并传递给下载环节：

// 组件内的Swagger UI配置
swaggerUiConfig = {
  // 其他配置项...
  responseInterceptor: (response) => {
    // 解析文件名并挂载到response对象上
    const contentDisposition = response.headers['Content-Disposition'];
    if (contentDisposition) {
      const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (filenameMatch) {
        response.customFilename = filenameMatch[1].replace(/['"]/g, '');
      }
    }
    return response;
  }
};

后续处理下载时，直接从response.customFilename获取正确的文件名即可。

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