使用 export_data() 从 JavaScript 数组直接生成 CSV/XLSX 文件,无需 DOM 表格
直接传入二维数组,第一行作为表头:
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 |
传入 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 });
使用 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 | 广州市天河区 |
支持任意深度的嵌套,自动计算 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 | 张三 | 13800001111 | zhangsan@example.com | 技术部 |
| 1002 | 李四 | 13800002222 | lisi@example.com | 产品部 |
数据对象中的值可以使用 { 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 | 优秀 |
动态生成大量数据并导出,支持进度回调:
演示当传入对象数组但忘记提供 columns 时的错误提示:
// 错误用法:对象数组必须提供 columns const data = [{ name: '张三', age: 28 }]; export_data(data, { filename: 'error.csv' });
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 } );