React项目使用XLSX导出HTML表格至XLSX时格式错乱问题

问题核心：XLSX库的table_to_sheet方法会将HTML中的嵌套表格解析为独立的表格结构，而非外层单元格内的多行内容，导致导出的Excel出现结构错乱。以下是两种可行的解决方案：

方案一：替换嵌套表格为单元格内换行（推荐） #

将嵌套表格的内容改用<br>分隔，前端通过CSS保持换行显示效果，导出时配置Excel单元格自动换行。

修改后的React组件代码 #

import React from 'react';
import * as XLSX from 'xlsx';

export default function AnnualReporTest() {
    const cellStyles = {
        border: '1px solid black',
        padding: '10px',
        textAlign: 'center',
        backgroundColor: 'lightgray',
        whiteSpace: 'pre-line' // 让前端自动识别换行符换行
    };

    const exportToExcel = () => {
        const table = document.getElementById('report-table');
        const ws = XLSX.utils.table_to_sheet(table);

        // 为所有单元格设置自动换行样式
        Object.keys(ws).forEach(key => {
            if (key.startsWith('!')) return; // 跳过工作表配置项
            ws[key].s = { alignment: { wrapText: true } };
        });

        ws['!cols'] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 30 }]; // 适配多行内容的列宽
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Report');
        XLSX.writeFile(wb, 'report.xlsx');
    };

    return (
        <div>
            <button onClick={exportToExcel}>Export to Excel</button>
            <div>
                <table id="report-table" cellSpacing="0">
                    <tr>
                        <th style={cellStyles}>Firstname</th>
                        <th style={cellStyles}>Lastname</th>
                        <th style={cellStyles}>Age</th>
                        <th style={cellStyles}>Budgetary Requirements</th>
                    </tr>
                    <tr>
                        <td style={cellStyles}>Jill</td>
                        <td style={cellStyles}>Smith</td>
                        <td style={cellStyles}>50</td>
                        <td style={cellStyles}>
                            First Budgetary Requirement<br />
                            Second Budgetary Requirement
                        </td>
                    </tr>
                    <tr>
                        <td style={cellStyles}>Eve</td>
                        <td style={cellStyles}>Jackson</td>
                        <td style={cellStyles}>94</td>
                        <td style={cellStyles}>
                            First Budgetary Requirement<br />
                            Second Budgetary Requirement
                        </td>
                    </tr>
                </table>
            </div>
            <br/>
            Hello World!
        </div>
    );
}

关键说明 #

• 用<br>替代嵌套表格，前端通过whiteSpace: 'pre-line'保持和原嵌套表格一致的视觉效果。
• 导出时为单元格添加alignment: { wrapText: true }样式，确保Excel自动换行显示内容。

方案二：手动构建工作表数据（精确控制） #

如果需要更复杂的格式定制，可以手动构建二维数组数据，再转换为Excel工作表，完全自定义表格结构。

修改后的导出函数代码 #

const exportToExcel = () => {
    // 手动构建表格数据，用\n作为换行符
    const data = [
        ['Firstname', 'Lastname', 'Age', 'Budgetary Requirements'],
        ['Jill', 'Smith', 50, 'First Budgetary Requirement\nSecond Budgetary Requirement'],
        ['Eve', 'Jackson', 94, 'First Budgetary Requirement\nSecond Budgetary Requirement']
    ];

    // 将数组转换为工作表
    const ws = XLSX.utils.aoa_to_sheet(data);

    // 设置自动换行样式
    Object.keys(ws).forEach(key => {
        if (key.startsWith('!')) return;
        ws[key].s = { alignment: { wrapText: true } };
    });

    ws['!cols'] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 30 }];
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Report');
    XLSX.writeFile(wb, 'report.xlsx');
};

关键说明 #

• 手动构建数据数组完全避免了HTML嵌套表格的解析问题，可灵活控制单元格内容。
• Excel会识别\n换行符，配合wrapText样式实现多行显示。

内容的提问来源于stack exchange，提问作者Rem Carr Ganase