vue项目使用XLSX插件纯前端导出excel

一、问题引入

前端el-table表格直接导出为excel文件，无需后端接口返回文件流

二、解决方案

1.插件安装

yarn add xlsx
yarn add file-saver

2.转换表格数据

将 el-table 的 tableData 数据格式化成适合 Excel 的结构

    // 1. 转换表格数据
      const data = this.tableData.map((row) => ({
        ID: row.id,
        姓名: row.name,
        年龄: row.age,
        城市: row.city,
      }));

3.调用xlsx的api生成表格

　　　　// 2. 创建工作表
      const worksheet = XLSX.utils.json_to_sheet(data);
  
      // 3. 创建工作簿
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "xxx sheet名");
  
      // 4. 生成 Excel 并下载
      const excelBuffer = XLSX.write(workbook, {
        bookType: "xlsx",
        type: "array",
      });
  
      const blob = new Blob([excelBuffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
  
      saveAs(blob, "xxx 文件名.xlsx");

4.动态表头

处理数据同理，根据动态表头处理成适合excel的结构

        const data = (this.tableData || []).map(row => {
          let obj = {};
          this.tableColumn.forEach((v, i) => {
            obj[v.label] = row[v.prop]
          })
          return obj;
        });

5.部分表格样式

更多表格样式处理参考下方sheetJs官网

        // 列宽
        // worksheet["!cols"] = [
        //   { wch: 20 },
        //   { wch: 15 },
        //   { wch: 20 },
        //   { wch: 15 },
        // ];    

参考：https://www.jb51.net/javascript/336483kvt.htm

excel插件官网地址：导入教程 | SheetJS 中文网 https://xlsx.nodejs.cn/docs/getting-started/examples/import