前端使用功能：前端直接请求后端流下载文件

        最近，项目中遇到一个前端下载文件时文件名称由后端提供的小需求（原来是前端把文件名称写死）。我们的项目架构是SpringBoot+React（TypeScript）。我看了一下后端代码，在设置响应的header已经塞进去文件名称。前端只需要从响应的header获取文件名称即可。后端设置响应header代码如下：

... ... 
try {
    fileName = new String(fileName.getBytes(), "ISO8859-1");
} catch (UnsupportedEncodingException e) {
    log.error("该文件[{}]不支持此编码转换,异常消息:[{}]", fileName, e.getMessage());
}
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
... ... 

        插一句题外话，为什么要对文件名称进行“ISO8859-1”格式编码，而且还在响应header中Content-Disposition这种格式的文件名称。原因是，我们原来写的项目不是前后端分离，前端直接一个ajax请求去下载，浏览器会认识这个Content-Disposition属性，自动配置“filename=”的名称。而且需要是使用“ISO8859-1”格式编码，不然中午会乱码。但是我们现在的项目是前后端分离。每次下载文件是前端去请求后端，拿到数据后，模拟一次点击下载，返回给用户。

        我们知道了在响应的header中有文件名称，我们就需要获取响应的header。但是我这里遇到一个问题：代码获取响应的header为空，但是浏览器F12可以看到响应的header。经过一番定位与查找。发现是因为浏览器跨域问题，配置参数缺少的问题。具体解决如下（java跨域配置类）：

...  ... 
//哪些header可以作为响应的一部分暴露给外部
res.setHeader("Access-Control-Expose-Headers", "*");
...  ... 

        解决以上问题后，前端可以正常获取文件名称。但是又遇到了文件名称中文乱码的问题。经过一番尝试，将文件名称解析成正常中文，具体处理如下（TypeScript前端代码）：

let fileName;
const disposition = response.headers.get('Content-Disposition');
if (disposition === undefined || disposition == null) {
    fileName = '出错了';
} else {
    fileName = decodeURI(escape(response.headers.get('Content-Disposition').split(';')[1].split('filename=')[1]));
}

        完整前端代码如下：

/**
 * 文件下载
 *
 *
 * @param response
 * @param mimeEnum
 */
export function downLoadFileNew(response: any, mimeEnum: MimeEnum) {

  let fileName;
  const disposition = response.headers.get('Content-Disposition');
  if (disposition === undefined || disposition == null) {
    fileName = '出错了';
  } else {
    fileName = decodeURI(escape(response.headers.get('Content-Disposition').split(';')[1].split('filename=')[1]));
  }
  const blob = new Blob([response], {type: mimeEnum});
  const a = document.createElement('a');
  a.download = fileName;
  a.href = window.URL.createObjectURL(blob);
  a.click();
};


/**
 *
 * Mime枚举
 */
export enum MimeEnum {
  ZIP = 'application/zip',
  JPEG = "image/jpeg",
  PNG = "image/png",
  PDF = 'application/zip',
  DOC = "application/msword",
  DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  XLS = "application/vnd.ms-excel",
  XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  PPT = "application/vnd.ms-powerpoint",
  PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation",
}