vue3管理后台导出Excel的方法

import { Folder } from "@element-plus/icons-vue";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";


//点击事件
<el-button type="success" :icon="Folder" @click="exportExcel">
      导出excel
</el-button>


//表格数据
<el-table  id="my-table"> 表格内容 </el-table>



// 导出Excel方法
const exportExcel = () => {
  const table = document.querySelector("#my-table");
  if (!table) return;
  // 创建提示框
  const loading = ElLoading.service({
    // 打开遮罩层
    lock: true,
    text: "请稍等...",
    background: "rgba(255, 255, 255, 0.5)",
  });
  const workbook = XLSX.utils.table_to_book(table); // 将表格转换为 workbook
  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" }); // 将 workbook 转换为二进制数据
  const excelData = new Blob([excelBuffer], {
    type: "application/octet-stream",
  }); // 创建 Blob 对象
  saveAs(excelData, `会员信息.xlsx`); // 下载 Excel 文件
  loading.close();
};