导语:
当你点进这篇文章说明你的http基础很烂,该去补http的知识了.
网上搜了一堆根本就不好使,都是JQ时代的教程,mvvm框架的教程质量很差
先上干货
需求:点击DIV,下载Excel文件
url地址为:http:www.xxx.com/api/download
参数:id:11,time:2018.9.1
特征:参数少,不超过浏览器get长度限制
思路:借助a标签的原生功能,写成div嵌套a标签,a标签的href指向URL.
如果参数非常多,超过了get的长度限制,只能用post
后端正常水平:
post把参数传给后端接口后,让后端返回文件的下载地址,再按照方法1中用window.location.href打开这个地址即可.
后端是萌新的话,只给你个下载接口,按照下面方法来:
多讲一点,文件属于流文件不是json,所以要改响应类型responseType为arraybuffer或者blob而不是改header.拿到二进制文件还需要按照服务器响应头的数据类型转换.
第一步:写好请求
第二步:访问下后端提供的下载接口,复制接口response headers的content-type放在上图中type的字符串中
这种方法会有个问题,当接口报错,后端返回的error是个json前端看到的会是乱码,
因为已经被浏览器处理成文件流了.
第一种办法,报错后端直接返回http状态码4XX,带error
第二种办法,http状态码还是200,需要和后端在响应头约定下报错格式.
比如后端在header里新增个errcode属性和error_content属性,如果errcode不等于undefined,中断执行,弹窗error-contente内容
第三步:设置文件名(可选)
一般文件名不用前端自己设置,后端完全可以设置好,直接下载就完事了.
但是下载文件对于大部分前后端都不擅长,这里说一种需要前端设置文件名且后端又容易配合实现的方法.
比如后端接口是把文件名称放在了response-header里
前端需要读取response-header里的content-disposition属性,处理后获取到文件名,文件名如果不是中文需要转码.
```
//读取response.header里的文件名
let tempName = headers["content-disposition"]
.split(";")[1]
.split("filename=")[1];
//如果不是中文需要解码,URI编码需要decodeURI解码,GBK编码用iconv-lite插件解码
tempName = decodeURI(tempName);
```
接下来我们需要用JS创建一个A标签,A标签的download属性值就是文件名
```
export const userDetailDownload = params =>{
return request({
url:"/analysis/userTagConfig/userDetailDownload",
method:"GET",
params:params,
responseType:'arraybuffer',
})
}
async go_down() {
let { data, headers } = await userDetailDownload({
baseTime: this.$route.query.baseTime,
orderField: "userId",
orderType: "desc",
platFrom: this.$route.query.platFrom,
tagName: this.$route.query.tagName,
value:
this.$route.query.value === "合计" ? null : this.$route.query.value,
});
//读取response.header里的文件名
let tempName = headers["content-disposition"]
.split(";")[1]
.split("filename=")[1];
//如果不是中文需要解码,URI编码需要decodeURI解码,GBK编码用iconv-lite插件解码
tempName = decodeURI(tempName);
//获取数据流数据
let blob = new Blob([data], { type: "application/vnd.ms-excel" });
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = tempName; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
},
```
出错排查建议:
1.检测请求的参数是不是json格式
2.后端接口的响应类型是不是文件格式
3.有没有跨域,为了直观教程中写的是完整URL,实际开发是写代理接口的
如果有帮助可以去github点个start GitHub - bill-mark/axios-post-file-excel: axios post方式下载文件
谢谢
