能否将JS树形对象转换为支持树形结构的Excel文件？

核心思路 #

先把递归嵌套的树形数据扁平化，同时记录每个节点的层级、需要合并的行数；再利用xlsx库的合并单元格和样式配置，实现Excel的树形展示效果。

步骤1：递归扁平化树形数据 #

先写两个工具函数，把嵌套的树形结构转成带层级、合并信息的线性数组：

// 计算节点的所有后代总数（含子节点的子节点）
function countChildren(children) {
  let total = children.length;
  children.forEach(child => {
    total += countChildren(child.children || []);
  });
  return total;
}

// 递归扁平化树形数据，添加层级和合并行数字段
function flattenTree(data, level = 0) {
  const result = [];
  data.forEach(item => {
    const childTotal = countChildren(item.children || []);
    // mergeCount：当前节点需要合并的行数（自身+所有后代）
    result.push({
      ...item,
      level,
      mergeCount: childTotal + 1
    });
    // 递归处理子节点，层级+1
    if (item.children?.length) {
      result.push(...flattenTree(item.children, level + 1));
    }
  });
  return result;
}

步骤2：生成树形Excel文件 #

在Vue组件中编写导出方法，结合xlsx库处理数据、合并单元格和样式：

import XLSX from 'xlsx';

export default {
  data() {
    return {
      jsonData: [/* 你的树形JSON数据 */]
    };
  },
  methods: {
    exportTreeExcel() {
      // 1. 扁平化树形数据
      const flattened = flattenTree(this.jsonData);
      if (!flattened.length) return;

      // 2. 提取表头（排除辅助字段：children、level、mergeCount）
      const headers = Object.keys(flattened[0]).filter(key => !['children', 'level', 'mergeCount'].includes(key));

      // 3. 构建Excel的二维数组数据
      const sheetData = [headers]; // 第一行是表头
      flattened.forEach(item => {
        const row = headers.map(header => item[header]);
        sheetData.push(row);
      });

      // 4. 创建工作表和工作簿
      const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, '树形数据');

      // 5. 配置合并单元格和缩进样式
      const mergeConfig = [];
      flattened.forEach((item, index) => {
        const rowNum = index + 1; // 表头占了第0行，所以数据行从1开始

        // 设置第一列的缩进：层级每+1，缩进增加1个字符
        const cellRef = XLSX.utils.encode_cell({ r: rowNum, c: 0 });
        worksheet[cellRef].s = {
          alignment: { indent: item.level }
        };

        // 如果当前节点有后代，合并第一列的对应行
        if (item.mergeCount > 1) {
          mergeConfig.push({
            s: { r: rowNum, c: 0 }, // 起始单元格：行rowNum，列0（第一列）
            e: { r: rowNum + item.mergeCount - 1, c: 0 } // 结束单元格
          });
        }
      });
      // 应用合并配置
      worksheet['!merges'] = mergeConfig;

      // 6. 导出Excel文件
      XLSX.writeFile(workbook, '树形数据导出.xlsx');
    }
  }
};

关键说明 #

1. 合并单元格：通过worksheet['!merges']配置，让父节点的第一列单元格覆盖所有子节点的对应位置，实现树形的层级视觉效果。
2. 缩进样式：利用alignment.indent设置单元格内容缩进，层级越高缩进越多，增强树形的层次感。
3. 兼容性：xlsx@0.17.4支持上述合并和样式配置，无需额外依赖。

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