解析带合并嵌套表头的Excel为指定结构JSON并渲染表单表格

问题 #

我需要导入Excel文件，把它解析成指定嵌套结构的JSON，用来在表单里还原出一样的表格。现在用的是XLSX库的XLSX.utils.sheet_to_json(sheet, {header: 1, defval: ''})方法，但这个方法识别不了合并单元格的关联方向（比如向上合并还是相邻合并），解析出来的空字符串只能说明是合并单元格，但没法判断合并关系。

示例 #

当前解析出来的JSON：

[
    ["Item","Index","Params","",""],
    ["","","Value","Style",""],
    ["", "","","Color","Font"],
    ["abc",1,999,"red","bold"],
    ["cas",2,312,"yellow","italic"]
]

想要得到的嵌套JSON结构：

[
   {title: 'Item'},
   {title: 'Index'},
   {title: 'Params',childrens: [
      {title: 'Value'},
      {title: 'Style', childrens: [
          {title: 'Color'},
          {title: 'Font'}
        ]
      },
     ]
   }
 ]

解决方案 #

方案1：基于XLSX库自己扩展处理 #

其实XLSX库本身能拿到工作表的合并单元格信息，通过sheet['!merges']属性就能获取所有合并区域的数组，每个区域是包含s（起始单元格）和e（结束单元格）的对象，比如{s: {r:0, c:2}, e: {r:2, c:2}}就表示第0到第2行、第2列的单元格是合并状态。

按下面的步骤来做就行：

1. 先用XLSX.utils.sheet_to_json(sheet, {header: 1, defval: ''})拿到原始的二维数组。
2. 遍历sheet['!merges']，给每个单元格标记归属关系（比如记录每个单元格对应的父单元格位置）。
3. 从表头的最底层行（示例里是第3行）开始往上构建嵌套结构：
   • 如果某个单元格属于合并区域的子单元格，就找到对应的父单元格，把当前单元格加到父单元格的childrens数组里。
   • 最后整理成你要的嵌套JSON格式。

方案2：用专门处理复杂表头的库 #

• exceljs：支持直接读取合并单元格信息，还能逐行逐单元格访问，方便自己写解析逻辑。你可以遍历表头的每一行，结合合并单元格的范围来搭建层级关系。
• handsontable：如果需要前端直接渲染解析后的表格，它自带Excel导入和复杂表头处理的能力，不过更偏向表格展示，解析部分得结合它的API自定义。

核心逻辑要点 #

不管用哪种方法，构建嵌套结构的关键是：

• 先确定表头有多少行（示例里是3行）。
• 从最下面的表头行开始，往上关联合并的父单元格，把子单元格挂到父单元格的childrens数组里。
• 没合并的单元格直接作为顶层节点。

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