|
一、上一篇已完成导出当前页数据。
https://blog.csdn.net/qq_45616003/article/details/118939568
二、在上一篇的基础上修改，解决多页时，只能导出当前页数据的问题
导出Excel
methods: {
//导出数据初始化及恢复原数据1、data查询条件，2、flag控制是否下载excel文件
async pageInit(data, flag) {
await getWorkorderPaging(data).then((res) => {
this.pageData = res.result.data;
});
if (flag) {
await this.downingExcel();
}
},
//执行下载excle文件
downingExcel() {
/* generate workbook object from table */
// 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
// .Devicetablee要导出的是哪一个表格
var fix = document.querySelector(".el-table__fixed");
var wb;
var dt = document.querySelector(".Devicetable");
if (fix) {
wb = this.$xlsx.utils.table_to_book(dt.removeChild(fix));
dt.appendChild(fix);
} else {
wb = this.$xlsx.utils.table_to_book(dt);
}
/* get binary string as output */
var wbout = this.$xlsx.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
// name+'.xlsx'表示导出的excel表格名字
this.$fileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"工单列表" + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
//导出excel表格所用
async exportExcel() {
console.log(this.queryObj);
//原先的页面条数
var pageSize = this.queryObj.pageSize;
//原先的当前页数
var num = this.queryObj.pageNum;
//导出所有数据的条数
var total = this.queryObj.total;
//判断是否有多页
if (total > pageSize) {
//设置导出所有数据的参数
this.queryObj.pageNum = 1;
this.queryObj.pageSize = total;
//修改导出的条数
await this.pageInit(this.queryObj, true);
//恢复原先数据
this.queryObj.pageNum = num;
this.queryObj.pageSize = pageSize;
await this.pageInit(this.queryObj, false);
} else {
this.downingExcel();
}
},
},
三、总结
我使用了async+await使方法同步，可以更好解决接口返回数据需要时间所带来的问题，。 setTimeout虽然可以解决，但是我觉得返回数据量的多少会影响接口响应的完成时间，因此使用延时会出现一系列问题。
|