如何用JavaScript为Excel转换的HTML表格新增Serial序号列

问题原因 #

你之前的写法没有区分表头行和普通数据行的第一列格式，所有行的第一列都用了<th>标签，且内容拼接逻辑不符合需求。只需要调整第一列的输出逻辑即可实现效果：

1. 遍历到第0行（表头行）时，第一列输出内容为Serial的<th>标签
2. 遍历到非0行（数据行）时，第一列输出内容为当前行序号的<td>标签，序号直接取row的值即可（表头占了第0行，第一条数据对应row=1，刚好匹配序号1的需求）

修改后的核心代码段 #

你只需要把原来循环里新增的table_output += '<th>'+['Serial'+row]+'</th>'替换为如下代码即可：

if(row == 0) {
    table_output += '<th>Serial</th>';
} else {
    table_output += '<td>' + row + '</td>';
}

完整修改后的代码 #

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="text-center mt-4 mb-4">使用JavaScript将Excel转换为HTML表格</h2>
        <div class="card">
            <div class="card-header"><b>选择Excel文件</b></div>
            <div class="card-body">
                <input type="file" id="excel_file" />
            </div>
        </div>
        <div id="excel_data" class="mt-5"></div>
    </div>
</body>
</html>

<script>
const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {
    if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
    {
        document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">仅允许.xlsx或.xls格式的文件</div>';
        excel_file.value = '';
        return false;
    }

    var reader = new FileReader();
    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event){
        var data = new Uint8Array(reader.result);
        var work_book = XLSX.read(data, {type:'array'});
        var sheet_name = work_book.SheetNames;
        var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

        if(sheet_data.length > 0)
        {
            var table_output = '<table class="table table-striped table-bordered">';
            for(var row = 0; row < sheet_data.length; row++)
            {
                table_output += '<tr>';
                // 新增Serial列的逻辑
                if(row == 0) {
                    table_output += '<th>Serial</th>';
                } else {
                    table_output += '<td>' + row + '</td>';
                }

                for(var cell = 0; cell < sheet_data[row].length; cell++)
                {
                    if(row == 0)
                    {
                        table_output += '<th>'+sheet_data[row][cell]+'</th>';
                    }
                    else
                    {
                        table_output += '<td>'+sheet_data[row][cell]+'</td>';
                    }
                }
                table_output += '</tr>';
            }
            table_output += '</table>';
            document.getElementById('excel_data').innerHTML = table_output;
        }
        excel_file.value = '';
    }
});
</script>

内容的提问来源于stack exchange，提问作者terry5546