案例:库存台账导出
库存台账需要把风险商品突出显示。本案例演示自定义 CellStyle(整列应用)与枚举映射的配合。
Mock 数据预览
| SKU | 商品名称 | 类目 | 仓库 | 库存 | 安全库存 | 单位 | 更新时间 | 状态 |
|---|---|---|---|---|---|---|---|---|
| SKU-00001 | 4K 摄像头 | 配件 | 上海仓 | 481 | 56 | 件 | 2026-07-17 | in-stock |
| SKU-00002 | 4K 摄像头 | 影音 | 上海仓 | 218 | 70 | 件 | 2026-07-28 | in-stock |
| SKU-00003 | 无线鼠标 | 配件 | 广州仓 | 597 | 44 | 件 | 2026-07-19 | in-stock |
| SKU-00004 | 4K 摄像头 | 外设 | 广州仓 | 3 | 58 | 件 | 2026-07-01 | low |
| SKU-00005 | 无线鼠标 | 家具 | 广州仓 | 213 | 25 | 件 | 2026-07-01 | in-stock |
实现代码
ts
import { exportExcel } from "@marcusok/excel-exporter";
import type { CellStyle } from "@marcusok/excel-exporter";
// rows:业务侧的库存数据,字段与下方 columns 一一对应
//(由你的业务代码提供,此处省略取数过程)
const lowStock: CellStyle = {
font: { color: "C00000", bold: true },
fill: { pattern: "solid", fgColor: "FDE2E2" },
};
const result = await exportExcel({
filename: "库存台账-2026-07",
sheets: [
{
name: "库存台账",
freezeRows: 1,
autoFilter: true,
columns: [
{ prop: "sku", label: "SKU", width: 16 },
{ prop: "name", label: "商品名称", width: 20 },
{ prop: "category", label: "类目", width: 10 },
{ prop: "warehouse", label: "仓库", width: 12 },
{
prop: "stock",
label: "库存",
width: 10,
format: { type: "number", thousands: true },
// 列级 style:应用于整列数据单元格(含全部数据行)
style: lowStock,
},
{ prop: "safetyStock", label: "安全库存", width: 12 },
{ prop: "unit", label: "单位", width: 8 },
{
prop: "updatedAt",
label: "更新时间",
width: 12,
format: { type: "date" },
},
{
prop: "status",
label: "状态",
width: 10,
format: {
type: "enum",
map: { "in-stock": "正常", low: "低库存", out: "缺货" },
fallback: "未知",
},
},
],
data: rows,
merges: [{ row: 0, col: 0, rowspan: 1, colspan: 2 }], // 示例:首行跨两列
},
],
});要点
lowStock自定义样式:红色加粗 + 浅红填充;注意列级style会应用于整列数据单元格,无法只标红低库存的行(暂不支持按行条件样式),可借助状态列的枚举文案辅助识别风险项;- 列级
style作用于整列数据单元格,适合状态类列; - 合并单元格
merges相对数据区定位,适合把同组首行跨列展示; - 数据量小(< 20,000 行)时保持默认
auto即可走带完整样式的 main 路径。