我想将 html 表格导出到 xlsx 文件，但格式被搞砸了

Question

import React, { useEffect, useState } from 'react';
import * as XLSX from 'xlsx';

export default function AnnualReporTest() {

    const thStyles = {
        border: '1px solid black',
        padding: '10px',
        textAlign: 'center',
        backgroundColor: 'lightgray',
    };

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

        ws['!cols'] = [{ wch: 20 }, { wch: 20 }, { wch: 20 },{ wch: 20 }, { wch: 20 }, { wch: 20 },{ wch: 10 }, { wch: 10 }, { wch: 15 },{ wch: 15 }, { wch: 15 }]

        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">
                <tr>
                    <th style={thStyles}>Firstname</th>
                    <th style={thStyles}>Lastname</th>
                    <th style={thStyles}>Age</th>
                </tr>
                <tr>
                    <td style={thStyles}>Jill</td>
                    <td style={thStyles}>Smith</td>
                    <td style={thStyles}>50</td>
                    <td style={thStyles}>
                                <table>
                                    <tr>
                                        <td style={thStyles}>First Budgetary Requirement</td>
                                    </tr>
                                    <tr>
                                        <td style={thStyles}>Second Budgetary Requirement</td>
                                    </tr>
                                </table>
                            </td>
                </tr>
                <tr>
                    <td style={thStyles}>Eve</td>
                    <td style={thStyles}>Jackson</td>
                    <td style={thStyles}>94</td>
                    <td style={thStyles}>
                                <table>
                                    <tr>
                                        <td style={thStyles}>First Budgetary Requirement</td>
                                    </tr>
                                    <tr>
                                        <td style={thStyles}>Second Budgetary Requirement</td>
                                    </tr>
                                </table>
                            </td>
                </tr>
                </table>
            </div>
            <br/>
            Hello World!
        </div>
    );
}

我尝试使用嵌套表，以便某些单元格被分成不同的行。前端一切都很好，但是将 html 表格转换为 xlsx 似乎破坏了表格的格式。我使用了 XLSX 库。

Answer 1

看起来很奇怪是完全正常的。您已经定义了 3 个标题（您的标签）并定义了 4 个单元格 ( ) 。 Excel 不知道在哪里添加数据，只是将其添加到第一个单元格中。您应该添加另一个标头，问题应该得到解决：

 <tr>
                <th style={thStyles}>Firstname</th>
                <th style={thStyles}>Lastname</th>
                <th style={thStyles}>Age</th>
                <th style={thStyles}>Requirement</th>
 </tr>