背景:业务上有这样一个需求:
一个列表数据,通过条件查询筛选出目标列表数据,然后将这些目标列表数据导出到本地
后端提供了一个post的异步请求接口,并返回了文件(此处后端逻辑应该是接收到查询条件,去数据库中筛选目标数据,并生成一个excel表格,返回给前端)
axios发送异步post请求常见方式:
axios.request({
url: '/***/getFile',
method: 'post',
data: {page:1}, // 查询文件时的请求参数
})
普通请求发出去,我们接收到返回的数据,一般是一个json的数据结构,拿到这些数据进行处理。
那么此时按照普通post请求发出去,得到的返回结果大概长这样
看到这样的返回数据,不知道的还以为是乱码呢,但你想一下,excel的表格在浏览器上肯定是打不开的,出现这样的结果也是情理之中。
那么我们应该怎样实现发送了这个异步请求,拿到数据并下载excel文件到本地呢?
要达到我们想要的效果,首先修改一下请求参数
- 将文件转为blob格式,方便前端做对应处理
axios.request({
url: '/api/**/getFiles',
method: 'post', // 以post请求为例
data: {page: 1, pageSize: 20, age: 20}, // 筛选列表的请求参数
responseType: 'blob', // 重要, 限制返回的数据结构为blob格式,方便前端做转换
})
- 此时,前端接收到的数据结果为:
- 前端处理数据
const res = axios.request({
url: '/api/**/getFiles',
method: 'post', // 以post请求为例
data: {page: 1, pageSize: 20, age: 20}, // 筛选列表的请求参数
responseType: 'blob',
}).then(res=>{
const data = res.data
let url = window.URL.createObjectURL(data) // 将二进制文件转化为可访问的url
var a = document.createElement('a')
document.body.appendChild(a)
a.href = url
a.download = '宿主列表.xls'
a.click() // 模拟点击下载
window.URL.revokeObjectURL(url)
})