常见的导出一般有两种,异步导出和同步导出,异步导出一般涉及的数据量较大,需要后台进行处理,处理成功后会返回下载链接,访问链接即可进行下载,这里介绍的是同步导出,一般数据量较小。
后端返回的数据格式一般有两种:一种是file,一种是csv。csv相较于file来讲,是文本格式类型数据(这里返回什么类型数据对前端影响不大)。
大量数据异步导出的前端解决方案 vuex + 轮询 + 后端任务队列
前端通过axios封装的get或post请求,导出页面表格内容为Excel
前端导出中的blob流转化----兼容主流浏览器 (而使用window.URL.createObjectURL这种方式是不兼容IE的)
导出excel需要告诉axios,返回数据响应的类型,然后前端再根据返回,进行下载,要注意文件名声明xlsx的后缀,不然在mac系统下,会下载为xls格式的文件,文件打不开会报错。
第一步:封装(post)
export const returnTicketStatementExport = (data) => {
return request({
url: '/ticketStatistics/returnTicketStatementExport',
method: 'post',
data: data,
responseType: 'blob',
})
}
第二步:在具体的vue文件中引入并使用
returnTicketStatementExport(this.queryParams).then((res) => {
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); //指定文件MIME
let a = document.createElement("a");
a.download = "详情.xlsx"; //指定下载的文件名
a.href = URL.createObjectURL(blob); // URL对象
a.click(); // 模拟点击
URL.revokeObjectURL(a.href); // 释放URL 对象
});
下面两个部分代码,容易误导新手,上面的代码就够新手用了。下面可以根据不同的业务需求场景进行参考即可。
get请求代码
export default function (data) {
axios({
method: 'post',
url: data.url, //后端接口地址
responseType: 'blob', //bolb格式的请求方式
headers: {
Authentication: getToken('Admin-Token') //请求头
},
data: data.data //需要传给后端的请求参数体
}).then(res => {
const BLOB = res.data;
const fileReader = new FileReader();
fileReader.readAsDataURL(BLOB); //对请求返回的文件进行处理
fileReader.onload = (e) => {
let a = document.createElement('a');
a.download = data.name + '.xlsx'
a.href = e.target.result;
document.body.appendChild(a)
a.click();
document.body.removeChild(a)
}
}).catch(err => {
console.log(err.message)
})
}
post请求代码
export default function (data) {
axios({
url: data.url,
method: 'get',
responseType: 'blob',
params: data.data, //与post传参方式不同之处
headers: {
Authentication: getToken()
}
}).then(res => {
var blob = new Blob([res.data],
{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'});
var filename = data.name + '.xlsx';
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.style.display = 'none';
downloadElement.href = href;
downloadElement.download =filename ; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}
}