a标签/js下载文件（2020）

主要参考【前端：下载文件实现方式及跨域下载（详解） https://blog.csdn.net/qq_43471802/article/details/103436595】
加上自己遇到的问题，记录并分享，如有错误，请指正

下载文件根据后端返回的是文件流还是URL下载url地址，主要分两种：

• 二进制式下载
• URL下载

一、二进制式下载

如果后端返回二进制文件流，前端需要使用Blob接收。

1、responseType（请求）

首先在前端发送请求时就应在请求头中，用responseType告知服务器需要返回的数据类型，responseType默认是“json”，这里我们请求的是文件流：“blob”。

不同的请求插件设置header的方式不同，用axios来说，axios.post(url, data, config)，responseType是在config里设置的（这些设置应该是在底层赋给请求头）：

export function download(url, data) {
   
    return axiosInstance.post(url,data,{
   
            responseType: 'blob'
        }
    );
}
1
2
3
4
5
6
7
8

如果这里不定义responseType，下载下来的文件内容会乱码

2、Content-Type（响应）判断是普通数据还是文件流（可选）

服务器返回不同数据，我们会做不同的处理，json我们直接取用，文件流数据需处理后下载。

在axios项目中，一般为了给所有的请求做一些统一处理，比如baseURL、请求带token，回包错误码提示，在底层封装一个axios实例，所有的请求都调用该实例的方法。

这种情况下，文件的请求就有可能和普通数据的请求调用的是同一个实例。直接在总响应拦截器里判断出文件流并执行下载，就不用在每一文件请求协议回调里各自再写一遍执行下载的代码。如何区分响应数据的是文件流还是json数据就很有必要了。

头部Content-Type表示服务端发送的类型及采用的编码方式，一般为application/json.而回包是文件，则Content-Type 一般为“octets/stream”，我们就以此判断是返回的是文件还是普通数据。

//axios响应拦截器里
if(res.headers &&
  (res.headers['content-type'].indexOf('application/x-msdownload') != -1 ||
    res.headers['content-type'].indexOf('octets/stream') != -1 ||
    res.headers['content-type'].indexOf('application/octet-stream') != -1)){
   
   //执行下载方法
}
1
2
3
4
5
6
7
8

3、Content-Disposition（响应）和文件名（可选）

还是针对第2节所描述的情况：判断出来什么时候是文件数据，在回包里拿到整个文件，而文件名就需要从