前端下载后台返回的文件流,response为乱码

问题

后台返回

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

打开response为乱码

解决方法

1. 做响应拦截,判断当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
   })
   

2. 封装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);
     }
   

3. 请求，以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])
      }
    }
   })
   

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