如何将vue3项目下的el-table表格导出到 excel 并保留样式和数据的展现形式？

需求是要将 图示的表格 导出到excel中 并且展现形式和样式要一致

请问有什么方法实现吗, 下面时表格实现的代码

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod" :row-class-name="rowClassName" class="dailyReport">
      <el-table-column label="江苏明卓加工情况" align="center">
        <template #header>
          <span style="font-size: 18px; font-weight: bolder;">江苏明卓加工情况</span>
        </template>
        <el-table-column prop="col1" label="机组" width="150" align="center" />
        <el-table-column prop="col2" label="机组人员" width="150" align="center" />
        <el-table-column prop="col3" label="客户" width="150" align="center" />
        <el-table-column label="规格" align="center">
          <el-table-column prop="col4" label="厚度" width="120" align="center" />
          <el-table-column prop="col5" label="宽度" width="120" align="center" />
          <el-table-column prop="col6" label="长度" width="120" align="center" />
        </el-table-column>
        <el-table-column prop="col7" label="数量" width="120" align="center" />
        <el-table-column prop="col8" label="产量(平方/米)" width="120" align="center" />
        <el-table-column prop="col9" label="绩效" width="120" align="center" />
        <el-table-column prop="col10" label="加工单价" width="120" align="center" />
        <el-table-column prop="col11" label="金额" width="120" align="center" />
        <el-table-column prop="col12" label="加工要求" width="120" align="center" />
        <el-table-column prop="col13" label="备注" width="120" align="center" />
      </el-table-column>
    </el-table>

  </div>
</template>

<script setup name="DailyReport">

const rowClassName = ({row}) => {
  if(row.col2 === '合计') {
    return 'totalRowClass'
  } else {
    return ''
  }
}
const tableData = [
  {
    col1: "2016-05-03",
    col2: "Tom",
    col3: "California1",
    col4: "1",
    col5: "No. 189",
    col6: "CA 900361",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2016-05-03",
    col2: "Tom",
    col3: "California2",
    col4: "2",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2016-05-03",
    col2: "Tom",
    col3: "California3",
    col4: "Los Angeles3",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
   
  {
    col1: "2016-05-03",
    col2: "合计",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "10",
    col8: "28",
    col9: "100",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },

  {
    col1: "2017-05-03",
    col2: "Tom2",
    col3: "Californiaq",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2017-05-03",
    col2: "Tom2",
    col3: "Californiaq",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2017-05-03",
    col2: "Tom2",
    col3: "Californiat",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2017-05-03",
    col2: "合计",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "10",
    col8: "28",
    col9: "100",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },
  {
    col1: "2018-05-03",
    col2: "Tom",
    col3: "California6",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2018-05-03",
    col2: "Tom",
    col3: "California7",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2018-05-03",
    col2: "Tom",
    col3: "California8",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2018-05-03",
    col2: "合计",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "10",
    col8: "28",
    col9: "100",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },

  {
    col1: "日产量",
    col2: "油膜机组(平方)",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "",
    col8: "激光+坡口(米)",
    col9: "",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },
  {
    col1: "生产金额",
    col2: " ",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "",
    col8: "",
    col9: "",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },
  {
    col1: "累计生产金额",
    col2: "  ",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "",
    col8: "",
    col9: "",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  }
];


// 合并行
const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  
 // 列合并 
 if(['生产金额', '累计生产金额'].includes(row.col1)) {
  if (columnIndex === 0) {
      return [1, 1]
    } else {
      return {
        rowspan: 1,
        colspan: tableData.length - 1
      }
    }
 }

 if(['日产量'].includes(row.col1)) {
    if([0, 1, 7].includes(columnIndex)) {
      return [1, 1]
    } else if([2, 8].includes(columnIndex)) {
      return [1, 5]
    } else {
      return [0, 0]
    }
 }

 // 行合并
 if (['col1'].includes(column.property)) {
    if(rowIndex > 0 && row.col1 === tableData[rowIndex - 1].col1) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      let rowspan = 1
      for(let i = rowIndex + 1; i < tableData.length; i++) {
        if(tableData[i].col1 === row.col1) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
      }
 } 

 if (['col2'].includes(column.property)) {
    if(rowIndex > 0 && row.col2 === tableData[rowIndex - 1].col2) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      let rowspan = 1
      for(let i = rowIndex + 1; i < tableData.length; i++) {
        if(tableData[i].col2 === row.col2) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
      }
 }
}
</script>


<style lang="scss">
.totalRowClass {
  color: red;
  font-weight: bold;
  .el-table__cell {
    background-color: #e9e907 !important;
  }
}

.dailyReport {
  thead.is-group th.el-table__cell{
     color: black;  
   }
}
</style>