最近做了一个前端导出的功能,使用的方法是
import FileSaver from "file-saver";
import XLSX from "xlsx";
具体代码是网上找的
exportToExcel() {
const XLSX = require("xlsx");
let fix = document.querySelector(".el-table__fixed");
let wb;
if (fix) {
//判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
wb = XLSX.utils.table_to_book(
document.querySelector("#oIncomTable").removeChild(fix)
);
document.querySelector("#oIncomTable").appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#oIncomTable"));
}
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"审批列表数据.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
能够成功导出,现在的问题是,没有导出成功的监听方法,想在导出过程中加一个正在导出的loading提示,有没有遇到过类似问题的,求解答
同问,解决了么?
在Vue中使用vue-json-excel或xlsx等库可以导出Excel表格。你可以在导出Excel表格之前使用loading组件来显示加载状态。在导出完成后,您可以取消加载状态。
<template>
<div>
<button @click="exportExcel">导出Excel</button>
<div v-if="loading">正在导出,请稍后...</div>
</div>
</template>
<script>
import { export_json_to_excel } from '@/utils/exportExcel';
export default {
data() {
return {
loading: false,
list: []
};
},
methods: {
exportExcel() {
this.loading = true;
// 导出Excel表格
export_json_to_excel(headers, data, excelName);
// 监听导出完成事件
document.addEventListener('export_success', this.handleExportSuccess);
},
handleExportSuccess() {
this.loading = false;
document.removeEventListener('export_success', this.handleExportSuccess);
}
}
};
</script>
```html
在这个示例中,当用户单击“导出Excel”按钮时,loading组件将显示“正在导出,请稍后...”。在导出Excel表格之后,export_success事件将被触发,可以通过document.addEventListener()方法来监听这个事件。在事件处理程序中,您可以取消加载状态,并使用document.removeEventListener()方法删除事件监听器,以避免重复调用处理程序。
请注意,export_json_to_excel()函数可能会因为导出Excel表格的大小和复杂度而导致操作时间较长,这可能会导致浏览器无响应。为了避免这个问题,可以将export_json_to_excel()函数放在setTimeout()函数中,并将延迟时间设置为0毫秒,这将使浏览器在导出之前立即响应。例如:
```html
setTimeout(() => {
export_json_to_excel(headers, data, excelName);
}, 0);
希望这可以帮助到你