首先封装接口时可以规范返回的格式
{
responseType: "blob",
}
这样返回的格式就是blob对象了
然后就是下载的流程了 :前端发送请求给后台 后台返回文件流 ,我们拿到文件流之后转换为blob对象 然后创建a标签 获取url 创建点击事件 利用a标签的herf进行下载
里面还有两个注意点 这个后面再说 好了 废话不多说 上代码
const result = await apiFilesDownload(params);
console.log(result.data);
//获取文件名
const filesNameCode = result.headers["content-disposition"]
.split(";")[1]
.split("=")[1];
//解密文件名称
const fileName = decodeURI(filesNameCode);
const a = document.createElement("a");
const res = result.data;
//如果后台返回的不是blob对象类型,先定义成blob对象格式,该type导出为xls格式,
const blob = new Blob([res], {
type: ".xlsx", //vnd.openxmlformats-officedocument.spreadsheetml.sheet
});
a.style.display = "none";
const url = window.URL || window.webkitURL || window.moxURL;
a.href = url.createObjectURL(blob);
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
this.downloadHDvisible = false;
注意点:
首先是获取文件名,我这里我的后台是通过请求头把文件名返回给我了 可能各公司不一样 但是如果是这种流做法的一般需要这种方法获取 一开始我死活获取不到文件名 卡了好几天 后来这个东西第一阶段测试不会测 所以搁置了几天 直到昨天才跟我的后台联调
好了重点来了 这个是需要你的后台把这个暴露出来 不然你是获取不到的 需要他加上两行代码
后端配置:
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)
这样前端才可以能拿到文件名
然而这个刚解决 下一个就来了 文件名是乱码 这就需要这句代码了
const fileName = decodeURI(filesNameCode);
使用decodeURL解析就可以了
然而然而事情并没有结束。。。。
一切问题解决完之后 下载下来的文件打开又变成了【object,object】
这个问题是因为我后台返回给我的是一个文件流,就是一串乱码,我还不能直接取这个乱码,比如这样:
const result = await apiFilesDownload(params);
你还得这样:
const res = result.data;
之后用blob取解析这个res才行
到这里就成功了,第一次做做个记录,希望能帮到各位。