前端三种输入数据来源生成 worksheet（工作表）新手适用详细篇【SheetJS】

目录

• 概览
• 功能差异
• • aoa_to_sheet
  • json_to_sheet
  • table_to_sheet
• 使用场景
• • aoa_to_sheet
  • json_to_sheet
  • table_to_sheet
• table_to_sheet一些options属性
• • 是否读取整个table
  • 是否跳过隐藏元素
  • 是否指定原始值
  • sheetRows
  • cellDates
• 高级用法
• • 混合使用场景
  • DOM表格增强

概览

方法	输入数据	适合场景	数据结构
aoa_to_sheet	数组的数组	已经是二维表格数据	[['姓名','年龄'],['张三',18]]
json_to_sheet	对象数组	后端接口 / JSON 数据	[{name:'张三',age:18}]
table_to_sheet	HTML <table> DOM	页面已有表格	<table>...</table>

功能差异

aoa_to_sheet

处理二维数组数据，数组的每个子数组对应工作表的行，子数组元素对应单元格值。适合结构化数据直接转换。

json_to_sheet

处理对象数组，每个对象对应一行，对象属性名作为表头，属性值填充单元格。适合API返回的JSON数据转换。

table_to_sheet

解析DOM中的<table>元素 ，自动提取<tr>和<td>生成工作表。适合从HTML页面直接提取表格数据。

使用场景

aoa_to_sheet

• Excel 原始二维数据
• 需要完全控制行列
• 自定义表头

const data = [
  ['姓名', '年龄'],
  ['张三', 18],
  ['李四', 20]
];

const ws = XLSX.utils.aoa_to_sheet(data);

生成效果：

A	B
姓名	年龄
张三	18
李四	20

const data = [
  ["Name", "Age", "Role"],
  ["Alice", 28, "Engineer"],
  ["Bob", 32, "Designer"]
];
const ws = XLSX.utils.aoa_to_sheet(data);

json_to_sheet

• REST API返回的JSON响应
• 数据库查询结果（如MongoDB文档）
• 需要自动生成表头的场景

const data = [
  { name: '张三', age: 18 },
  { name: '李四', age: 20 }
];

const ws = XLSX.utils.json_to_sheet(data);

生成效果：

name	age
张三	18
李四	20

table_to_sheet

• 页面已经渲染了 HTML table
• 直接导出网页表格
• 不想重新组织数据

<table id="demo">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
  </tr>
</table>

const table = document.getElementById('demo');
const ws = XLSX.utils.table_to_sheet(table);

table_to_sheet一些options属性

是否读取整个table

table_to_sheet(table)

是否跳过隐藏元素

默认的话。隐藏列会导出

table_to_sheet(table, {
  display: true
})

是否指定原始值

raw: true->保持原值,数字还是数字

table_to_sheet(table, {
  raw: true
})

sheetRows

只读取前10行数据

XLSX.utils.table_to_sheet(table, {
  sheetRows: 10
})

cellDates

日期存成 Date 类型

XLSX.utils.table_to_sheet(table, {
  cellDates: true
})

高级用法

混合使用场景

当JSON数据需要特殊处理时：

const jsonData = [{x:1, y:2}, {x:3, y:4}];
const aoaData = jsonData.map(item => [item.x, item.y]);
const ws = XLSX.utils.aoa_to_sheet([["X", "Y"], ...aoaData]);

DOM表格增强

处理复杂表格结构：

const ws = XLSX.utils.table_to_sheet(table, {
  raw: true,  // 保留原始HTML内容
  dateNF: "YYYY-MM-DD"  // 自定义日期格式
});

所有方法最终都生成相同格式的工作表对象，可配合XLSX.writeFile导出为Excel文件。

🫱官方网址，一键跳转