vue 将table导出excel且带样式的正确姿势

注意：  table 要加上  border="1px" （在页面上因为css不会显示）， 不然导出的excel 没有边框

    <div ref="dabiao_div">
        <table id="dabiao" class="zytable" style="width: 100%;" border="1px">
            <tr>
                <td colspan="53" style="padding: 12px; font-size: 36px; width: 100%; text-align: center;">2024-2025学年上学期课程表
                </td>
            </tr>
            <tr>
                <td>系部</td>
                <td>层次</td>
                <td>班级</td>
                <td colspan="10">周一</td>
                <td colspan="10">周二</td>
                <td colspan="10">周三</td>
                <td colspan="10">周四</td>
                <td colspan="10">周五</td>
            </tr>
            <template v-for="xibu in xibus">
                <template v-for="banji in xibu.banjis"> 
                    <tr>
                        <td :style="{background: xibu.color}">{{xibu.name}}</td>
                        <td :style="{background: banji.isgaokao?'#8dc63f':'#ec008c'}">{{ }}</td>
                        <td>{{banji.name}}</td>
                        <!-- 0 -->
                        <template v-for="w of 5">
                            <template v-for="order of 10">
                                <td :style="get_td_style(banji,(w-1)*10,order)" v-html="get_td_html(banji, (w-1)*10,order)" @click="td_click(banji,(w-1)*10,order)"></td>
                            </template>
                        </template>
                    </tr>
                </template>
            </template>
        </table>
    </div>

 
/* -------- 边框 -------- */
.zytable {
  table-layout:fixed;
  /* 相邻的单元格共用同一条边框  */
  border-collapse: collapse;
  text-align: center;
  border-radius: 4px;
}

.zytable th,
.zytable td {
  border: 1px #e8ecf3 solid; /* 相邻的单元格共用同一条边框  */ 
  height: 32px;
  line-height: 32px;
  padding: 6px;
  white-space: nowrap; 
}

.zytable th {
  background: #f3f6f9;
  border-bottom: 2px #7998b8 solid;
}

.zytable tr { 
  border-bottom: 1px #ccc solid;
}
/* -------- 隔行变色 -------- */
/* .zytable tr:nth-child(odd) >>> td {
  background: #f7f8f9 !important; 
} */

/*设置鼠标聚焦到行上是凸显 #f3f6f9;*/
.zytable tr:hover {
  background-color: #fef2ce; 
}

.zytable tr:hover > td {
  cursor: pointer;
}

.zytable tr.current-row > td {
  cursor: pointer;
}

    import FileSaver from 'file-saver'



    down_excel1(ss) {
      let str = this.$refs.dabiao_div.innerHTML
      let strData = new Blob([str], { type: 'text/plain;charset=utf-8' });
      FileSaver.saveAs(strData, ss + '-大表.xlsx');
    },