📦 数组直接导出

使用 export_data() 从 JavaScript 数组直接生成 CSV/XLSX 文件,无需 DOM 表格

💡 适用场景: 数据来自 API 接口、计算结果、用户输入等,无需先渲染到 HTML 表格再导出。 支持字符串、数字、布尔值、null/undefined 等多种数据类型。

场景1: 基本数组导出

直接传入二维数组,第一行作为表头:

const data = [
    ['姓名', '年龄', '城市', '邮箱'],
    ['张三', 28, '北京', 'zhangsan@example.com'],
    ['李四', 35, '上海', 'lisi@example.com'],
    ['王五', 42, '广州', 'wangwu@example.com'],
];

export_data(data, { filename: '用户数据.csv' });
export_data(data, { filename: '用户数据.xlsx', format: ExportFormat.Xlsx });
姓名年龄城市邮箱
张三28北京zhangsan@example.com
李四35上海lisi@example.com
王五42广州wangwu@example.com

场景2: 对象数组 + 表头配置(推荐)

传入 columns 表头配置和 data 对象数组,类似 Ant Design Table 用法:

const columns = [
    { title: '姓名', key: 'name' },
    { title: '年龄', key: 'age' },
    { title: '住址', key: 'address' },
];

const data = [
    { name: '张三', age: 28, address: '北京市朝阳区' },
    { name: '李四', age: 35, address: '上海市浦东新区' },
];

export_data(data, { columns: columns, filename: '用户详情.xlsx', format: ExportFormat.Xlsx });

场景3: 嵌套表头(多行表头 + 合并单元格)

使用 children 属性定义多级表头,导出 XLSX 时自动生成合并单元格:

const nestedColumns = [
    { title: '姓名', key: 'name' },
    { title: '其他信息', children: [
        { title: '年龄', key: 'age' },
        { title: '住址', key: 'address' },
    ]},
];

// 导出效果(Excel 中):
// | 姓名     |    其他信息    |
// | (rowspan) | 年龄 |  住址  |
// | 张三      |  28  |  北京  |

export_data(data, { columns: nestedColumns, filename: '嵌套表头.xlsx', format: ExportFormat.Xlsx });
姓名其他信息
年龄住址
张三28北京市朝阳区
李四35上海市浦东新区
王五42广州市天河区

场景4: 三级嵌套表头

支持任意深度的嵌套,自动计算 rowspan 和 colspan:

const deepColumns = [
    { title: 'ID', key: 'id' },
    { title: '基本信息', children: [
        { title: '姓名', key: 'name' },
        { title: '联系方式', children: [
            { title: '电话', key: 'phone' },
            { title: '邮箱', key: 'email' },
        ]},
    ]},
    { title: '部门', key: 'dept' },
];
ID基本信息部门
姓名联系方式
电话邮箱
1001张三13800001111zhangsan@example.com技术部
1002李四13800002222lisi@example.com产品部

场景5: 数据合并单元格(colSpan / rowSpan)

数据对象中的值可以使用 { value, colSpan?, rowSpan? } 格式来指定合并:

const columns = [
    { title: '姓名', key: 'name' },
    { title: '科目', key: 'subject' },
    { title: '成绩', key: 'score' },
    { title: '评价', key: 'comment' },
];

const data = [
    // 张三的姓名合并2行,评价合并2行
    { name: { value: '张三', rowSpan: 2 }, subject: '数学',
      score: 90, comment: { value: '优秀', rowSpan: 2 } },
    { name: { value: '', rowSpan: 0 }, subject: '英语',
      score: 85, comment: { value: '', rowSpan: 0 } },
    // 李四的地址横跨2列
    { name: '李四', subject: { value: '全科', colSpan: 2 },
      score: { value: '', colSpan: 0 }, comment: '良好' },
    // 正常行
    { name: '王五', subject: '数学', score: 95, comment: '优秀' },
];
姓名科目成绩评价
张三数学90优秀
英语85
李四全科良好
王五数学95优秀

场景6: 大数据量导出(带进度回调)

动态生成大量数据并导出,支持进度回调:

场景7: 错误处理演示

演示当传入对象数组但忘记提供 columns 时的错误提示:

// 错误用法:对象数组必须提供 columns
const data = [{ name: '张三', age: 28 }];
export_data(data, { filename: 'error.csv' });

💡 API 概览

import { export_data, ExportFormat } from './pkg/belobog_stellar_grid.js';

// export_data(data, options?)
// options: { columns, filename, format, progressCallback, indentColumn, childrenKey, freezeRows, freezeCols }

// 参数说明:
// data     : Array<Array> 二维数组 或 Array<Object> 对象数组
// options? : 可选配置对象
//   columns?          : 表头配置数组 { title, key?, children? }[]
//   filename?         : 文件名(可选,自动添加扩展名)
//   format?           : ExportFormat.Csv | ExportFormat.Xlsx(默认 CSV)
//   progressCallback? : (progress: number) => void  进度回调
//   indentColumn?     : 缩进列(树形数据)
//   childrenKey?      : 子节点键名(树形数据)
//   freezeRows?       : 冻结前 N 行(仅 XLSX,默认自动根据表头行数)
//   freezeCols?       : 冻结前 N 列(仅 XLSX,默认 0)

// 模式1: 二维数组(不传 columns)
export_data([['A', 'B'], [1, 2]]);

// 模式2: 对象数组 + 表头配置
export_data(
    [{ name: '张三', age: 28 }],
    { columns: [{ title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }],
      filename: '成绩单.xlsx',
      format: ExportFormat.Xlsx }
);

// 模式3: 嵌套表头(XLSX 自动合并单元格)
export_data(
    data,
    { columns: [{ title: '姓名', key: 'name' },
       { title: '详情', children: [
         { title: '年龄', key: 'age' },
         { title: '住址', key: 'address' }
       ]}],
      filename: '报表.xlsx', format: ExportFormat.Xlsx }
);

// 模式4: 数据合并单元格(colSpan / rowSpan)
// 单元格值使用 { value, colSpan?, rowSpan? } 格式
export_data(
    [{ name: { value: '张三', rowSpan: 2 }, score: 90 },
     { name: { value: '', rowSpan: 0 }, score: 85 }],
    { columns: [{ title: '姓名', key: 'name' },
       { title: '成绩', key: 'score' }],
      filename: '合并.xlsx', format: ExportFormat.Xlsx }
);