问题

后台返回

content-disposition: attachment;filename=245484+%282%29.jpg
content-type: application/octet-stream

打开response为乱码

解决方法

做响应拦截,判断当content-type为application/octet-stream,设置responseType为blob 以umi-request为例

// 拦截响应
request.interceptors.response.use(async (response: Response, options: RequestOptionsInit) => {
  if (response.headers.get('Content-Type') === 'application/octet-stream') {
    options.responseType='blob'
  }
  return response
})

封装download函数

 /**
 * 下载文件
 * @param content 文件流
 * @param fileName 文件名称
 */
  export const download = (content: any, fileName: string) => {
    const blob = new Blob([content], {
      type: 'application/octet-stream'
    });
    const a = document.createElement("a");
    const url = window.URL.createObjectURL(blob);
    const filename = fileName;
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
  }

请求，以umijs的useRequest为例

const downloadFileR = useRequest((meetingId, fileName) => downloadFile(meetingId, fileName), {
 manual: true,
 onSuccess: (result, params) => {
   if (result.code < 0) {
     message.error(result.message)
   } else {
     download(result, params[1])
   }
 }
})

其他的请求库和封装方式类似，不再举例