第一步
定义一个js 文件(我的是 method.js) 然后在axios请求中 特别注意headers要加上( 'Content-Type': 'application/json')(好吧,可能只有我这种憨憨才会犯错),我就是之前没有加,然后百度出来的也没有加,一直报错type未定义,同时一般做项目的时候都会自己封装网络请求,在处理这里的时候要注意你的网络请求有没有做返回状态判断(添加响应拦截器),我就是加了然后被拦截了让我郁闷了一下子,就是下面这种
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(res => {
//res.data.type 导出处理
if (res.data.code === 0||res.data.code === 200||res.data.type) {
return res
}else if(res.data.code==1){
// Message.error(res.data.msg);
return res
}
else if (res.data.code==401){
// localStorage.clear();
// Message.error(res.msg);
// sessionStorage.clear();
// router.push('/');
}
else {
Message.error(res.data.msg);
/* loadingInstance.close() */
// this.$message.error(res.data.msg)
}
}, err => {
// Message.error('请求失败, 请稍后再试!');
return Promise.reject(err)
})
import axios from 'axios'
// 导出Excel公用方法
export function exportMethod(data) {
axios({
method: data.method,
url: `${data.url}${data.params ? '?' + data.params : ''}`,
responseType: 'blob',
headers:{
'Content-Type': 'application/json'
}
}).then((res) => {
// console.log('明细导出')
const link = document.createElement('a')
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
// link.download = res.headers['content-disposition'] //下载后文件名
link.download = data.fileName //下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}).catch(error => {
// Message.error({
// message: '网络连接错误'
// })
console.log(error)
})
}
第二步
这里提醒一下
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
需要取res.data ,如果直接取res,导出的excel数据是[object,object],感兴趣的可以试试看,本人亲测
在需要的页面引用
import {exportMethod} from '../../assets/js/method.js'
//导出
exportExcel(){
let myObj={
method: 'get',
url: '/order/exportExcel',
fileName:'订单',
params:`merchantId=${this.search.merchantId}&beginDate=${this.dates[0]}&endDate=${this.dates[1]}`
}
exportMethod(myObj);
},
踩进了自己挖的坑,仅此告诫以后的自己不要再次掉坑里。
结语:不想奋斗了,又嫌弃自己太菜了
网友评论