vue3+ts 导出功能，同时解决导出同时下载两个文件bug

下载引入第三方库

npm i xlsx

引入：import { writeFile, utils, WorkBook  } from 'xlsx'

示例为导出el-table表格数据

let dataList = ref<any>([])
// 业务逻辑
const exportTable = () => {
  const worksheet = utils.json_to_sheet(dataList.value);
  const workBook = utils.book_new();
  utils.book_append_sheet(workBook, worksheet, 'Sheet 1');
  const workBookOutput = writeFile(workBook, 'tableData.xlsx', { bookType: 'xlsx', type: 'array' }) as ArrayBuffer;

  const blob = new Blob([workBookOutput], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.download = 'tableData.xlsx';

  // 清除之前的事件监听器
  link.removeEventListener('click', exportTable);

  link.addEventListener('click', () => {
    URL.revokeObjectURL(url);
    document.body.removeChild(link);
  });

  document.body.appendChild(link);

  // 使用 setTimeout 将触发 click 事件的操作放入异步环境
  setTimeout(() => {
    link.click();
  }, 0);
}

在代码中添加了 link 到 DOM 后立即触发了 click 事件，导致了多次下载文件。为了解决这个问题，我们需要将触发下载的操作放在异步环境中，确保 link 已经完全添加到 DOM 再触发 click 事件。其中’tableData.xlsx’为下载文件名，可自定义修改~