vue + element中 el-table 封装导出Excel（合并单元格）复制即用

下载使用的 js库

npm install --save xlsx file-saver

新建 utils/index.js

import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import { Loading, MessageBox } from "element-ui";

/**
 * 将表数据导出到 Excel 文件。
 * @param {Object} tableRef - 对表组件的引用
 * @param {string} sheetName - Excel 工作表的名称
 * @param {string} fileName - Excel 文件的名称。
 */
export function exportExcel(tableRef, sheetName, fileName) {
  return new Promise(function (resolve, reject) {
    MessageBox.confirm("导出 excel, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      closeOnClickModal: false,
    })
      .then(function () {
        const loadingInstance = Loading.service({
          lock: true,
          text: "正在导出...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        const ws = XLSX.utils.table_to_sheet(tableRef.$el, {
          raw: true,
        });
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, sheetName);
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            fileName
          );
          resolve();
        } catch (e) {
          if (typeof console !== "undefined") {
            console.log(e, wbout);
          }
          MessageBox.alert("导出失败", "错误", {
            type: "error",
          });
          reject(e);
        } finally {
          loadingInstance.close();
        }
      })
      .catch(function () {
        reject();
      });
  });
}

页面中使用

import { exportExcel } from "utils/index";


<el-button
          v-waves
          size="small"
          type="primary"
          icon="el-icon-tickets"
          @click="exportExcel"
          >导出</el-button
        >
 <el-table
        ref="excelTable"
        :data="dataList"
        border
        size="mini"
        style="width: 100%"
      >
     .....
</el-table>

methods: {
	exportExcel() {
      exportExcel(this.$refs.excelTable, "销售全景", "销售全景.xlsx");
    },
}