前端通过返回的blob数据类型导出文件(带异常解决)
web端项目开发,后台管理或集成系统居多,多半是数据展示和数据统计为中心的,这种项目就离不开文件的上传和下载,之前我发布了了上传的文章,这次我们来说一下下载,下载其实不难,通常后端返回一个路径,直接就下载了,今天我们说一下另外一种方式通过blob数据类型导出,话不多说直接上代码:
1,第一步封装接口的时候,传responseType字段说明返回的数据类型
//这里是封装接口的时候
exportMonitorData(params){
return httpRequest({
url: url.exportMonitorData,
method: 'post',
responseType: 'blob',//首先我们封装接口的时候要定义好返回的数据类型,传给后端
data:params,
})
},
2,是准备好将blob数据类型转化为文件并下载的方法,作为公共方法调用,因为项目很多地方都会用到
//这个方法封装到你的utils文件里,作为公共方法调用,这是直接导出文件的方法
export function exportData(res, name) {
const content = res
const blob = new Blob([content], {
type: 'application/ms-excel'})
const fileName = name
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else {
navigator.msSaveBlob(blob, fileName)
}
}
3,这一步最为关键,主要是异常情况的处理,会有点特殊。
decisionHttp.exportElectricity(params).then(res => {
if(res.type === 'application/json'){
//接口返回的数据类型如果是json,说明是报错信息
let reader = new FileReader();
reader.readAsText(res, 'utf-8');//这时候你的msg字段是blob类型的,不能直接用,所以数据类型要先转回来
reader.onload = ()=>{
//这里是处理异步,其他方式用不了,这里很关键
let {
msg} = JSON.parse(reader.result);//转回来是json类型,再转一次
this.$message.error(msg); //弹出错误提示
}
}else{
exportData(res, "用电分析列表.xls");//这里是上面封装的方法,传入res和文件的名字 两个参数就好了
}
});