vue导出excel如何监听导出成功,增加导出中提示

最近做了一个前端导出的功能,使用的方法是

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);

希望这可以帮助到你