前端导出excel表数据

场景：不用调用后端接口，完全由前端控制导出下载。

一、前提条件

安装 xlsx ，并导入

npm i xlsx
import XLSX from "xlsx";

二、准备表头数据

例如：

tableHeader: [
        { prop: "orderNo", label: "对账单编号", width: "140", align: "center" },
        {
          prop: "customerName",
          label: "客户名称",
          width: "230",
          align: "center",
        },
        {
          prop: "customerCode",
          label: "客户编码",
          width: "180",
          align: "center",
        },
        { prop: "name1", label: "客户资信评级", width: "120", align: "center" },
        {
          prop: "settleMoneyCount",
          label: "结算总额",
          width: "160",
          align: "center",
        },
        {
          prop: "startTime",
          label: "结算开始日期",
          width: "170",
          align: "center",
          formatData: (val) => {
            return val.split(" ")[0];
          },
        },
        {
          prop: "endTime",
          label: "结算结束日期",
          width: "170",
          align: "center",
          formatData: (val) => {
            return val.split(" ")[0];
          },
        },
        {
          prop: "invoiceStatus",
          label: "对账单状态",
          width: "140",
          align: "center",
          formatData: (val) => {
            const invoiceStatusFormat = [
              {
                label: "未开票",
                value: "0",
              },
              {
                label: "开票中",
                value: "1",
              },
              {
                label: "已开票",
                value: "2",
              },
            ];
            return invoiceStatusFormat[val].label;
          },
        },
        {
          prop: "reconciliationDate",
          label: "已完成对账",
          width: "140",
          align: "center",
        },
        { prop: "nam2e", label: "对账责任人", width: "120", align: "center" },
        { prop: "name4", label: "最后操作时间", width: "180", align: "center" },
        {
          prop: "oper",
          label: "操作",
          width: "200",
          align: "center",
          fixed: "right",
        },
  ],

三、核心代码

//点击导出按钮调用该方法
handleExportFuc() {
      const data = {
        XLSX: XLSX,
        tableHeader: this.tableHeader,
        formName: "待核销列表",
        selectRows: this.rows, //用户选择需要导出的数据 <el-table> @selection-change="handleSelect"
      };
      exportFuc(data, this);
      this.$refs["tableRef"].$refs.multipleTable.clearSelection(); //点击导出后清空用户选择
 },

封装导出实现代码

/**
 * @param {Object} data
 * @param {Array} tableHeader
 */
export function exportFuc(data, val) {
  const that = val
  if (data.selectRows.length <= 0) {
    return that.$message.warning("请选择需要导出的数据");
  }
  const firstRow = [];
  data.tableHeader.forEach((t) => {
    if (t.prop !== "oper") {
      firstRow.push(t.label);
    }
  });
  const tableData = [firstRow]; // 表格表头
  data.selectRows.forEach((item) => {
    const rowData = [];
    data.tableHeader.forEach((t) => {
      if (t.prop !== "oper") {
        let value = item[t.prop];
        if (t.formatData) {
          value = t.formatData(value);
        }
        rowData.push(value);
      }
    });
    tableData.push(rowData);
  });
  const ws = data.XLSX.utils.aoa_to_sheet(tableData);
  const wb = data.XLSX.utils.book_new();
  data.XLSX.utils.book_append_sheet(wb, ws, data.formName); // 工作簿名称
  data.XLSX.writeFile(wb, `${data.formName}.xlsx`); // 保存的文件名
}

最后：一般都是让后端做，后端不愿意做，就只能靠自己了。当然你也可以抱着学习的态度去了解一下，对自己也有好处！