SheetJS（xlsx）导出 Excel 全流程（新手版）【SheetJS】

• 每天收获一点点，今天是sheetjs！！

目录

• 理解Excel的结构
• 安装
• 完整流程简单例子：
• 核心对象解释：
• • worksheet（工作表）
  • workbook（工作簿）
• [三种创建 worksheet 的方式](#三种创建 worksheet 的方式)
• • aoa_to_sheet（最底层）
  • json_to_sheet（最常用）
  • • 高级写法！！！！！（入坑不亏）
  • table_to_sheet
• [book_append_sheet 是什么](#book_append_sheet 是什么)
• [多个 sheet](#多个 sheet)
• [writeFile 是什么](#writeFile 是什么)
• 常用设置项（重点）
• • 设置列宽
  • 设置杭高
  • 合并单元格
  • 设置单元格格式
  • 设置超链接
  • 设置公式
• 项目完整流程：
• 真实案例：
• 概念讲解

理解Excel的结构

一个excel文件：

Excel文件
  └── Workbook（工作簿）
          ├── Sheet1（工作表）
          ├── Sheet2
          └── Sheet3

在SheetJS里：

Excel概念	SheetJS对象
Excel文件	workbook
sheet页	worksheet
单元格	cell

先创建worksheet -> 再放进workbook -> 最后导出writeFile

安装

npm：

npm install xlsx

yarn：

yarn add xlsx

完整流程简单例子：

import * as XLSX from "xlsx";

// 1. 准备数据
const data = [
  ["姓名", "年龄"],
  ["张三", 18],
  ["李四", 20]
];

// 2. 生成 worksheet（工作表）
const ws = XLSX.utils.aoa_to_sheet(data);

// 3. 创建 workbook（Excel文件）
const wb = XLSX.utils.book_new();

// 4. 把 worksheet 添加到 workbook
XLSX.utils.book_append_sheet(wb, ws, "用户数据");

// 5. 导出 Excel
XLSX.writeFile(wb, "test.xlsx");

核心对象解释：

worksheet（工作表）

就是Excel里的一项，例如：

姓名	年龄
张三	18

对应：

const ws = XLSX.utils.aoa_to_sheet(data);
console.log(ws);
// 打印出来的结果：
// {
//   A1: { v: '姓名' },
//   B1: { v: '年龄' },
//   A2: { v: '张三' },
//   B2: { v: 18 },
//  '!ref': 'A1:B3'
// }

字段解释：

字段	含义
A1	Excel 单元格
v	value 值
!ref	sheet范围

workbook（工作簿）

就是整个 Excel 文件

创建：（此时他还是空的）

const wb = XLSX.utils.book_new();

三种创建 worksheet 的方式

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

aoa_to_sheet（最底层）

const ws = XLSX.utils.aoa_to_sheet([
  ["姓名", "年龄"],
  ["张三", 18]
]);

json_to_sheet（最常用）

const ws = XLSX.utils.json_to_sheet([
  { name: "张三", age: 18 },
  { name: "李四", age: 20 }
]);

实际项目常见做法：

const exportData = list.map(item => ({
  姓名: item.name,
  年龄: item.age
}));

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

高级写法！！！！！（入坑不亏）

先定义"导出配置"

const columns = [
  {
    title: "姓名",
    dataIndex: "name"
  },
  {
    title: "年龄",
    dataIndex: "age"
  }
];

统一做转换

const exportData = list.map(item => {
  const row = {};

  columns.forEach(col => {
    row[col.title] = item[col.dataIndex];
  });

  return row;
});

table_to_sheet

HTML table 转 worksheet：

<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);

适合页面表格直接导出。

book_append_sheet 是什么

作用就是把 worksheet 添加到 workbook

参数	含义
wb	workbook（Excel文件）
ws	worksheet（sheet页）
"Sheet1"	Excel底部tab名称

XLSX.utils.book_append_sheet(
  wb,
  ws,
  "Sheet1"
);

多个 sheet

const wb = XLSX.utils.book_new();

const ws1 = XLSX.utils.aoa_to_sheet([
  ["姓名", "年龄"]
]);

const ws2 = XLSX.utils.aoa_to_sheet([
  ["产品", "价格"]
]);

XLSX.utils.book_append_sheet(wb, ws1, "用户");

XLSX.utils.book_append_sheet(wb, ws2, "商品");

XLSX.writeFile(wb, "demo.xlsx");

结果：

Excel
  ├── 用户
  └── 商品

writeFile 是什么

把 workbook 写成真正的 Excel 文件并下载：（浏览器-> 自动下载； Node.js->写入磁盘）

XLSX.writeFile(wb, "test.xlsx");

常用设置项（重点）

设置列宽

ws["!cols"] = [
  { wch: 20 },
  { wch: 10 }
];

效果：

列	宽度
A列	20
B列	10

设置杭高

ws["!rows"] = [
  { hpx: 40 }
];

合并单元格

表示 A1:C1 合并

ws["!merges"] = [
  {
    s: { r: 0, c: 0 },
    e: { r: 0, c: 2 }
  }
];

参数解释：

字段	含义
s	start
e	end
r	row
c	col

设置单元格格式

日期：

ws["B2"].z = "yyyy-mm-dd";

保留两位小数：

ws["B2"].z = "0.00";

设置超链接

ws["A1"].l = {
  Target: "https://google.com"
};

设置公式

ws["C2"] = {
  f: "SUM(A2:B2)"
};

Excel：=SUM(A2:B2)

项目完整流程：

接口数据
   ↓
tableData
   ↓
map转换字段
   ↓
json_to_sheet
   ↓
worksheet
   ↓
设置列宽/格式/合并
   ↓
book_new
   ↓
book_append_sheet
   ↓
workbook
   ↓
writeFile
   ↓
Excel下载

真实案例：

import * as XLSX from "xlsx";

const data = [
  {
    name: "张三",
    age: 18,
    score: 99
  },
  {
    name: "李四",
    age: 20,
    score: 88
  }
];

// 1. 转换导出数据
const exportData = data.map(item => ({
  姓名: item.name,
  年龄: item.age,
  分数: item.score
}));

// 2. 创建 worksheet
const ws = XLSX.utils.json_to_sheet(exportData);

// 3. 设置列宽
ws["!cols"] = [
  { wch: 20 },
  { wch: 10 },
  { wch: 10 }
];

// 4. 创建 workbook
const wb = XLSX.utils.book_new();

// 5. 添加 sheet
XLSX.utils.book_append_sheet(
  wb,
  ws,
  "用户统计"
);

// 6. 导出
XLSX.writeFile(
  wb,
  "用户统计.xlsx"
);

概念讲解

名称	本质
worksheet	一张 sheet
workbook	整个 Excel
writeFile	导出 Excel
book_append_sheet	把 sheet 放进 Excel
aoa/json/table_to_sheet	创建 worksheet