导出文件的过程
前端发请求, 后端处理后返回文件流, 前端通过Blob
解析并下载
实现过程:
前端发请求
需要将响应类型更改为 arraybuffer
或 blob
不设置响应类型会导致下载的文件看起来乱码
解决前端导出文件乱码(设置响应类型)
responseType: 'arraybuffer'
或 responseType: 'blob'
以常用的请求库axios
为例(有可能你的项目对 axios 进行了二次封装, 你需要找到 options 来配置 )
get
请求写法
axios.get(url, {
params: form,
responseType: 'arraybuffer'
// responseType: 'blob'
})
post
请求写法
axios.post(url, params, {
responseType: 'arraybuffer'
// responseType: 'blob'
})
后端处理返回文件流
前端通过Blob
对象解析并下载
文件名和文件类型建议用后端返回的数据, 一般会放在响应头
文件名和类型的信息存放在 content-disposition
和 content-type
文件名为中文的时候, 后端一般会转码前端可以使用decodeURIComponent
解码
解析并下载
按照上图返回的结构, 以axios
为例处理, res
为请求成功后后端返回数据的参数
let filename = decodeURIComponent(
res.headers['content-disposition'].split(';')[1].split('=')[1]
)
// let filename = '导出表格.xlsx' // 可以, 但不建议直接写文件名
let fileType = decodeURIComponent(res.headers['content-type'])
let blob = new Blob([res.data], {
type: fileType
// type: 'application/vnd.ms-excel' // 特殊情况下直接写文件的MIME类型
})
let url = window.URL.createObjectURL(blob)
// 创建一个临时的url指向blob对象
// 创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
let a = document.createElement('a')
a.href = url
a.download = filename
// 下载
a.click()
// 释放这个临时的对象url
window.URL.revokeObjectURL(url)