el-table合并内容相同的表头、单元格,利用file-saver和XLSX纯前端导出多级表头表格,列宽根据内容长度动态设置，可直接复制

合并 

表头合并：el-table中加上这个方法

  :header-cell-style="handerMethod"  

 方法：

// 合并表头这里合并的是2、3

    handerMethod({ row, column, rowIndex, columnIndex }) {

      console.log(row,'row');

      if (row[1].level === 1) {

        // 这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效

        row[1].colSpan = 0

        row[2].colSpan = 2

        if (columnIndex === 1) {

          return { display: 'none' }

        }

      }

    },

单元格合并：和表头合并在同个位置加上这个方法： :span-method="genderSpanCity"

方法：

genderSpanCity({ row, column, rowIndex, columnIndex }) {

      if (columnIndex === 0 || columnIndex === 1 ) {//第一列和第二列有相同的就合并

        const cacheKey = `${rowIndex}-${columnIndex}`

        if (this.cache[cacheKey]) {

          return this.cache[cacheKey]

        }

        const currentValue = row[column.property]

        const preRow = this.tableData[rowIndex - 1]

        const preValue = preRow ? preRow[column.property] : null

        if (currentValue === preValue) {

          this.cache[cacheKey] = { rowspan: 0, colspan: 0 }

        } else {

          let rowspan = 1

          for (let i = rowIndex + 1; i < this.tableData.length; i++) {

            const nextRow = this.tableData[i]

            const nextValue = nextRow[column.property]

            if (nextValue === currentValue) {

              rowspan++

            } else {

              break

            }

          }

          this.cache[cacheKey] = { rowspan, colspan: 1 }

        }

        return this.cache[cacheKey]

      }

    },

效果：

参考链接：el-table合并表头，合并数据相同的单元格_el-table表头合并_TomBlibe的博客-CSDN博客 

 导出

下载插件：

主要是两个依赖:(xlsx 和 file-saver)

npm install --save xlsx file-saver

版本我这里用的是： 

引入：

在要使用的页面引入（注意这里用*as 引入不然容易报错）

import FileSaver from "file-saver"

import * as XLSX from "xlsx"

使用 ：

1、给要导出的表格el-table添加id，我这里设置的是id="selfTable"

2、给导出按钮添加方法，以下函数可直接复制

exportExcel() {

       // 表头样式

      let headerStyle = {

        font: {

          name: "Arial",

          sz: 12,

          color: { rgb: "fb3f0a" }

        },

        fill: {

          type: "pattern",

          pattern: "solid",

          fgColor: { rgb: "4F81BD" }

        }

      };

      /* generate workbook object from table */

      let xlsxParam = { raw: true ,

        bookType: "xlsx",

        bookSST: true,

        type: "array",} 

      let wb = XLSX.utils.table_to_book(

        document.querySelector("#selfTable"),

        xlsxParam

      )

      // 获取第一个工作表

      let firstSheetName = wb.SheetNames[0]

      let worksheet = wb.Sheets[firstSheetName]

      // 设置列宽（示例：将第一列的宽度设置为100，第二列的宽度设置为200）

      // 动态设置列宽

      let range = XLSX.utils.decode_range(worksheet["!ref"])

      let columnWidths = []

      for (let col = range.s.c; col <= range.e.c; col++) {

        let maxLength = 0

        let font = "Arial" // 设置字体样式和字号

        let fontSize = 12

         // 设置表头样式

        let headerCellAddress = XLSX.utils.encode_cell({ c: col, r: range.s.r });

        if (worksheet[headerCellAddress]) {

          worksheet[headerCellAddress].s = headerStyle;

        }

        console.log(headerCellAddress,'headerCellAddress');

        for (let row = range.s.r + 1; row <= range.e.r; row++) {

          let cellAddress = XLSX.utils.encode_cell({ c: col, r: row })

          let cellValue = worksheet[cellAddress]?.v || ""

          let canvas = document.createElement("canvas")

          let ctx = canvas.getContext("2d")

          ctx.font = `${fontSize}px ${font}`

          let metrics = ctx.measureText(cellValue.toString())

          let cellLength = Math.ceil(metrics.width / 7) // 将像素长度转换为字符长度

          if (cellLength > maxLength) {

            maxLength = cellLength

          }

        }

        let columnWidth = maxLength > 0 ? maxLength + 2 : 10;

        columnWidths[col] = { wch: columnWidth };

      }

       worksheet["!cols"] = columnWidths;

      //wpx 字段表示以像素为单位，wch 字段表示以字符为单位

      // v：单元格的值

      // t：单元格的类型 'b'布尔值、'n'数字、'e'错误、's'字符串、'd'日期

      // s：单元格的样式

      // 将 workbook 导出为二进制字符串

      let wbout = XLSX.write(wb, {

        bookType: "xlsx",

        bookSST: true,

        type: "array",

      })

      console.log(wbout,'wboutwbout');

      // 保存文件

      try {

        FileSaver.saveAs(

          new Blob([wbout], { type: "application/octet-stream" }),

          `表格名称.xlsx`

        )

      } catch (e) {

        if (typeof console !== "undefined") {

          console.log(e, wbout)

        }

      }

      return wbout

    },

效果：

参考链接：

vue + element UI 中 el-table 数据导出Excel表格_elementplus表格导出excel-CSDN博客

JavaScript导出excel文件，并修改文件样式 - 前端简单说 - SegmentFault 思否