前端使用xlsx库，导出多级表头excel
步骤
1、需要写好table，需要他的dom结构
页面table预览
2、使用xlsx的table_to_book方法，把dom转成workbook
const workbook = XLSX.utils.table_to_book(
document.getElementById('test-table'), {
raw: true // 有的是日期、小数等格式，直接乱码#。所以这里直接保留原始字符串
});
3、再使用writeFile 或者 writeFileXLSX 导出即可
XLSX.writeFile(workbook, 'ikun.xlsx')
点击导出
导出的xlsx预览
源码
<template>
<div class="border">
<table border="1" id="test-table">
<thead>
<tr colspan="2">
<th colspan="2"> ikun</th>
</tr>
<tr>
<td>姓名</td>
<td>口号</td>
</tr>
</thead>
<tbody>
<tr>
<td>小黑子</td>
<td>树枝666</td>
</tr>
</tbody>
</table>
<button @click="onExport">导出</button>
</div>
</template>
<script setup>
import * as XLSX from 'xlsx'
const onExport = () => {
const workbook = XLSX.utils.table_to_book(
document.getElementById('test-table'), {
raw: true // 有的是日期、小数等格式，直接乱码#。所以这里直接保留原始字符串
});
XLSX.writeFile(workbook, 'ikun.xlsx')
}
</script>
缺点
需要dom存在，虚拟列表显示的无法导出
解决方案
可以自己定义一个workbook
就是参考workbook的对象结构，模拟一个对象
塞好数据后，调用XLSX.writeFile也是可以实现导出的
workbook大概是这种结构
const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
Sheets就是放数据的地方，这个可以通过aoa，json等自带方法生成
就是XLSX.utils.aoa_to_sheet| XLSX.utils.json_to_sheet 这种方法
const data = XLSX.utils.aoa_to_sheet([
['ikun', ''],
['姓名', '口号'],
['小黑子', '树枝666']])
// 数据放上去
wb.Sheets.Sheet1 = data;
合并单元格，s是start，e是end，c是列column，r是行row
s: { c: 0, r: 0 }表示起始单元格在0 0坐标
e: { c: 1, r: 0 }表示终点单元格在1 0坐标
wb.Sheets.Sheet1["!merges"] = [{ s: { c: 0, r: 0 }, e: { c: 1, r: 0 } }];
最后导出即可
XLSX.writeFile(wb, 'ikun.xlsx')
