前端使用xlsx庫慕蔚，導(dǎo)出多級表頭excel
步驟
1适秩、需要寫好table，需要他的dom結(jié)構(gòu)
頁面table預(yù)覽
2纷宇、使用xlsx的table_to_book方法夸盟，把dom轉(zhuǎn)成workbook
const workbook = XLSX.utils.table_to_book(
document.getElementById('test-table'), {
raw: true // 有的是日期、小數(shù)等格式像捶，直接亂碼#上陕。所以這里直接保留原始字符串
});
3、再使用writeFile 或者 writeFileXLSX 導(dǎo)出即可
XLSX.writeFile(workbook, 'ikun.xlsx')
點(diǎn)擊導(dǎo)出
導(dǎo)出的xlsx預(yù)覽
源碼
<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">導(dǎo)出</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 // 有的是日期拓春、小數(shù)等格式唆垃，直接亂碼#。所以這里直接保留原始字符串
});
XLSX.writeFile(workbook, 'ikun.xlsx')
}
</script>
缺點(diǎn)
需要dom存在痘儡，虛擬列表顯示的無法導(dǎo)出
解決方案
可以自己定義一個(gè)workbook
就是參考workbook的對象結(jié)構(gòu)辕万，模擬一個(gè)對象
塞好數(shù)據(jù)后，調(diào)用XLSX.writeFile也是可以實(shí)現(xiàn)導(dǎo)出的
workbook大概是這種結(jié)構(gòu)
const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
Sheets就是放數(shù)據(jù)的地方沉删，這個(gè)可以通過aoa渐尿，json等自帶方法生成
就是XLSX.utils.aoa_to_sheet| XLSX.utils.json_to_sheet 這種方法
const data = XLSX.utils.aoa_to_sheet([
['ikun', ''],
['姓名', '口號'],
['小黑子', '樹枝666']])
// 數(shù)據(jù)放上去
wb.Sheets.Sheet1 = data;
合并單元格，s是start矾瑰，e是end砖茸，c是列column，r是行row
s: { c: 0, r: 0 }表示起始單元格在0 0坐標(biāo)
e: { c: 1, r: 0 }表示終點(diǎn)單元格在1 0坐標(biāo)
wb.Sheets.Sheet1["!merges"] = [{ s: { c: 0, r: 0 }, e: { c: 1, r: 0 } }];
最后導(dǎo)出即可
XLSX.writeFile(wb, 'ikun.xlsx')
