Angular 10中如何下载嵌套JSON数据并转换为Excel格式？

步骤1：安装必要依赖 #

首先安装处理Excel生成和文件保存的工具库：

npm install xlsx file-saver --save
npm install @types/file-saver --save-dev

步骤2：扁平化嵌套JSON数据 #

目标Excel要求每个员工的每条薪资记录单独成行，因此需要先将嵌套的SALARY数组展开，把员工基础信息与每条薪资数据合并：

// 原始嵌套数据
employees = [
  {
    SNO: 1,
    name: "HARIPRASATH",
    SALARY: [
      { SNO: 1, MONTH: 'APRIL', DATE: '01-04-2022', TIME: '10.AM', AMOUNT: 15000 },
      { SNO: 2, MONTH: 'MAY', DATE: '01-05-2022', TIME: '10.AM', AMOUNT: 15000 },
      { SNO: 3, MONTH: 'JUNE', DATE: '01-06-2022', TIME: '10.AM', AMOUNT: 15000 }
    ]
  },
  {
    SNO: 2,
    name: "SINDHUJA",
    SALARY: [
      { SNO: 1, MONTH: 'APRIL', DATE: '01-04-2022', TIME: '10.AM', AMOUNT: 18000 },
      { SNO: 2, MONTH: 'MAY', DATE: '01-05-2022', TIME: '10.AM', AMOUNT: 18000 },
      { SNO: 3, MONTH: 'JUNE', DATE: '01-06-2022', TIME: '10.AM', AMOUNT: 18000 }
    ]
  }
];

// 数据扁平化处理函数
transformNestedData() {
  const flattenedData: any[] = [];
  this.employees.forEach(emp => {
    emp.SALARY.forEach(sal => {
      flattenedData.push({
        'Employee SNO': emp.SNO,
        'Employee Name': emp.name,
        'Salary SNO': sal.SNO,
        'Month': sal.MONTH,
        'Date': sal.DATE,
        'Time': sal.TIME,
        'Amount': sal.AMOUNT
      });
    });
  });
  return flattenedData;
}

步骤3：实现Excel导出逻辑 #

使用xlsx库将扁平化后的数据转换为Excel工作表，再通过file-saver触发浏览器下载：

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

// Excel导出函数
exportToExcel() {
  const flattenedData = this.transformNestedData();
  // 创建工作表，强制指定列顺序匹配目标格式
  const worksheet = XLSX.utils.json_to_sheet(flattenedData, {
    header: ['Employee SNO', 'Employee Name', 'Salary SNO', 'Month', 'Date', 'Time', 'Amount']
  });
  // 创建工作簿并添加工作表
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Employee Salaries');
  // 生成Excel文件的Blob对象
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  // 触发文件下载
  saveAs(blob, 'employee-salaries.xlsx');
}

步骤4：添加导出触发按钮 #

在组件HTML模板中添加按钮，绑定导出函数：

<button (click)="exportToExcel()">导出薪资表到Excel</button>

关键说明 #

• 扁平化数据时自定义字段名，与目标Excel表头完全对应，保证导出格式匹配需求。
• 通过json_to_sheet的header参数强制列顺序，避免字段顺序混乱。
• 导出的.xlsx格式兼容主流Excel版本。

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