如何为JS读取Excel生成的HTML表格新增自定义Serial列并绑定预设值

你只需要在原有代码基础上做3处修改即可，以下是完整可运行的修改后代码：

修改后的JS代码 #

// 先定义你的Serial列表，提取为按顺序排列的数组
const serialList = Object.values({
  'serial1': '8BQZ-CCSU-XY36', 
  'serial2': 'IEAJ-NVIS-VMKM', 
  'serial3': '1ZQN-FXHB-FTXT'
})
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>';

        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>';
          }
        }
        // 新增Serial列的内容
        if (row == 0) {
          // 表头加Serial列名
          table_output += '<th>Serial</th>';
        } else {
          // 数据行按索引取对应Serial值，超出数量则显示空
          const serialVal = serialList[row-1] ?? ''
          table_output += `<td>${serialVal}</td>`;
        }
        table_output += '</tr>';
      }

      table_output += '</table>';
      document.getElementById('excel_data').innerHTML = table_output;
    }

    excel_file.value = '';
  }
});

核心修改说明 #

1. 先把你给出的List A对象通过Object.values()转换为按顺序排列的数组，方便后续按数据行索引取值
2. 在原有单元格渲染逻辑结束后，额外新增Serial列的内容：
   • 表头行新增Serial列标题
   • 数据行通过row-1匹配serial数组的索引，自动取出对应序列号填充，如果上传的表格行数超过Serial的数量，默认填充空值，你也可以自行修改兜底逻辑

HTML代码无需做任何修改，直接沿用原有代码即可。

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