工作中肯定有很多导出excel、下载文件这种功能。一般都是后端做好，我们去请求对应的接口就行了，前端还需要做一些处理就可以实现导出、下载功能了。具体怎么操作呢，我们来看看！
第一步：在请求的时候做些一些处理
我们在请求的时候 需要定义responseType【响应类型】为blob类型，如果是post请求还需要在请求头里携带Content-Type: 'multipart/form-data'
// 在请求的时候做一些处理
// get请求
markMownLoad = (id) => axios('get',`URLxxxxxx?fileId=${id}`,{
responseType: 'blob',
headers:{
'Content-Type': 'multipart/form-data'
}
})
// post请求
markMownLoads = (id) => axios('post',`URLxxxxxx?fileId=${id}`,{
responseType: 'blob',
headers:{
'Content-Type': 'multipart/form-data'
}
})第二步：向后端发请求
在请求之前，我们先封装一个解码下载的一个方法，方便我们请求成功后调用
function downLoadXls (res) {
const fileNames = res.headers['content-disposition']
if(fileNames) {
//解码
const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1])
// 处理返回的文件流
const content =res.data
const blob = new Blob([content],{
type: "application/octet-stream; charset=utf-8"
});
if('download' in document.createElement('a')) {
//非IE下载
const a = document.createElement('a') //创建一个a标签
a.download = fileName //指定文件名称
a.style.display = 'none' //页面隐藏
a.href = URL.createObjectURL(blob) // href用于下载地址
document.body.appendChild(a) //插到页面上
a.click() //通过点击触发
URL.revokeObjectURL(a.href) //释放URL 对象
document.body.removeChild(a) //删掉a标签
}else{
//IE10 + 下载
navigator.msSaveBlob(blob,fileName)
}
}
}这个时候发请求就可以了
// 发请求 把后端返回的传过去解码，然后实现导出、下载
markMownLoads(参数).then(res => downLoadXls(res))
咱们来看一下后端返回的数据时什么样子的
文章来源：https://www.toymoban.com/news/detail-532183.html
文章来源地址https://www.toymoban.com/news/detail-532183.html
到了这里，关于后端返回文件流，前端怎么导出、下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
