question:当我们使用Ajax去调用后台接口,导出Excel等其他二进制文件时, 在浏览器控制台中是无法获取的就像下图这样
原因是Ajax无法获取后端返回的文件流格式, 那么如何才能获取到后台返回的数据呢?
方法一:不使用Ajax发送请求,通过将接口请求地址放到url请求栏的方式获取
window.location.href = " url请求地址"
但是这种方法并没有通过Ajax去发送请求,可能会带来一些问题。
- 使用axios封装Ajax的就不会走拦截器。
- 如果公司封装的http,有些可能存在鉴权的问题。
方法二:通过Ajax请求接口,然后通过Blob对象接收,并通过a标签的href属性来下载二进制文件
// 请求后台接口数据
const res = await getExcel(params);
// 将数据存放到 Blob 对象中
const b = new Blob([res],{
type: 'application/vnd.ms-excel'
})
//创建一个空的 a 标签
let a = document.createElement('a');
// 将 blob 文件转化为 url 格式并赋值给a标签的 href 属性
a.href = URL.createObjectURL(b)
// 给a标签设置下载链接并命名
a.setAttribute('download', 'excel.xls');
// 点击事件触发 href
a.click();
// 清除 a 标签
a = null
这样就实现了通过ajax的方式, 实现Excel文件下载了