前端处理axios请求下载后端返回的文件流代码实例
作者：大力99
使用axios可以很方便地获取后端返回的文件流数据,并在前端直接在浏览器下载,这篇文章主要给大家介绍了关于前端处理axios请求下载后端返回的文件流的相关资料,需要的朋友可以参考下
需求：
点击按钮下载文件，请求后端接口，后端返回文件流，如果遇到错误信息并不能简单的res.message拿到错误提示，而且想要正常下载前端也需要做些处理。
1.请求接口要加上响应类型为blob， responseType: ‘blob’，如：
function logsDownload(params) {
return axios.get('xxx/xxx/xxx',{
params,
responseType: 'blob'
})
}
2.定义一个下载的方法
function download(fileName ='log', type: 'txt' | 'json, file:Blob) {
const blob = new Blob([file]);
// 获取heads中的filename文件名
const downloadElement = document.createElement('a');
// 创建下载的链接
const href = window.URL.createObjectURL(blob);
downloadElement.href = href;
// 下载后文件名
downloadElement.download = `${fileName}.${type}`
document.body.appendChild(downloadElement);
// 点击下载
downloadElement.click();
// 下载完成移除元素
document.body.removeChild(downloadElement);
// 释放掉blob对象
window.URL.revokeObjectURL(href);
}
3.借助FileReader对象实现，FileReader.readAsText(data)开始读取指定的Blob中的内容。
result属性中将包含一个字符串以表示所读取的文件内容。
读取操作完成时触发FileReader.onload()，在这里通过reader.result拿到读取的文件内容（即后端返回值），然后对其json序列化，即
可拿到后端返回的message，然后进行相应的展示即可。
// 定义一个读取文件的方法
async function readFileAsText (file:File){
const fileReader = new FileReader()
let text
await new Promise(resolve=>{
fileReader.onLoad = ()=>{
text = fileReader.result
resolve(true)
}
fileReader.readAsText(file, 'utf8')
})
return text || ''
}
4.请求成功和失败的返回结果是不同
请求下载一个文件，请求成功时返回的是一个文件流，type是对应文件类型，例如：text/xml，正常导出文件； 而请求失败的时候返回的是json ，type为application/json，不会处理错误信息，而是直接导出包含错误信息的文件。
但是无论成功还是失败，返回的结果都是blob格式的文件流。
因此可以通过返回的blob数据type类型进行区分，如果type是文件类型，导出文件，如果type是json则把blob数据转为string，处理错误信息。
在响应拦截器那里加入以下，需要判断如果时文件流直接返回的情况
// 响应拦截器
banseInstance.interceptors.response.use(response => {
...
// 文件流直接返回
if (response .request.responseType === 'blob' ) {
if (response .data.type === 'application/json') {
const res = await readFileAsText(response.data)
ElMessage.error(JSON.parse(res).message || '下载失败')
return false;
} else {
return response .data;
}
}
...
}
点击按钮下载
const handleDown = () => {
const fileName = 'xxxx'
const file = await logsDownload(params)
if (file) {
download(fileName, 'txt', file)
ElMessage.success('下载成功')
}
}总结
到此这篇关于前端处理axios请求下载后端返回的文件流的文章就介绍到这了,更多相关axios请求下载后端返回文件流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！