xlsx导出多级表头excel

前端使用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;

最后导出即可

XLSX.writeFile(wb, 'ikun.xlsx')