前端导出excel表格并修改导出表格样式利用xlsx-js-style插件灵活设置表头样式、单元格合并、字体大小以及主体

利用xlsx-js-style插件灵活设置表头样式、单元格合并、字体大小以及主体文字水平居中等

1、安装

通过 npm 安装 xlsx-js-style：

npm install xlsx-js-style

在浏览器中安装：

<script src="dist/xlsx.bundle.js"></script>

2、核心 API

参考 SheetJS 的文档获取核心 API 引用。
当前使用的 SheetJS 版本：0.18.5

3、样式 API

3.1单元格样式示例

// 步骤 1：创建新的工作簿
const wb = XLSX.utils.book_new();

// 步骤 2：创建数据行和样式
let row = [
	{ v: "Courier: 24", t: "s", s: { font: { name: "Courier", sz: 24 } } },
	{ v: "粗体及颜色", t: "s", s: { font: { bold: true, color: { rgb: "FF0000" } } } },
	{ v: "填充: 颜色", t: "s", s: { fill: { fgColor: { rgb: "E9E9E9" } } } },
	{ v: "换行\n文字", t: "s", s: { alignment: { wrapText: true } } },
];

// 步骤 3：创建包含行的工作表；向工作簿添加工作表
const ws = XLSX.utils.aoa_to_sheet([row]);
XLSX.utils.book_append_sheet(wb, ws, "readme 示例");

// 步骤 4：将 Excel 文件写入浏览器
XLSX.writeFile(wb, "xlsx-js-style-demo.xlsx");

3.2单元格样式属性

单元格样式由一个大致与 OpenXML 结构平行的样式对象指定。
目前支持的样式属性包括：alignment，border，fill，font，numFmt。

样式属性	子属性	默认值	描述/值
`alignment`	`vertical`	`bottom`	`"top"` 或 `"center"` 或 `"bottom"`
	`horizontal`	`left`	`"left"` 或 `"center"` 或 `"right"`
	`wrapText`	`false`	`true` 或 `false`
	`textRotation`	`0`	`0` 到 `180`，或者 `255` // `180` 是向下旋转 180 度，`255` 是特殊值，垂直对齐
`border`	`top`		`{ style: 边框样式, color: 颜色样式 }`
	`bottom`		`{ style: 边框样式, color: 颜色样式 }`
	`left`		`{ style: 边框样式, color: 颜色样式 }`
	`right`		`{ style: 边框样式, color: 颜色样式 }`
	`diagonal`		`{ style: 边框样式, color: 颜色样式, diagonalUp: true/false, diagonalDown: true/false }`
`fill`	`patternType`	`"none"`	`"solid"` 或 `"none"`
	`fgColor`		前景色：见 `COLOR_STYLE`
	`bgColor`		背景色：见 `COLOR_STYLE`
`font`	`bold`	`false`	字体加粗 `true` 或 `false`
	`color`		字体颜色 `COLOR_STYLE`
	`italic`	`false`	字体斜体 `true` 或 `false`
	`name`	`"Calibri"`	字体名称
	`strike`	`false`	字体删除线 `true` 或 `false`
	`sz`	`"11"`	字体大小（点数）
	`underline`	`false`	字体下划线 `true` 或 `false`
	`vertAlign`		`"superscript"` 或 `"subscript"`
`numFmt`		`0`	如 `"0"` // 数字格式的整数索引，参见 StyleBuilder.SSF 属性
			如 `"0.00%"` // 匹配内置格式的字符串，参见 StyleBuilder.SSF
			如 `"0.0%"` // 指定自定义格式的字符串
			如 `"0.00%;\(0.00%\);\-;@"` // 指定自定义格式的字符串，转义特殊字符
			如 `"m/dd/yy"` // 使用 Excel 的格式记法指定日期格式

`COLOR_STYLE` {object} 属性

用于 border，fill，font 的颜色以名称/值对象的形式指定 - 使用以下之一：

颜色属性	描述	示例
`rgb`	16 进制 RGB	`{rgb: "FFCC00"}`
`theme`	主题颜色索引	`{theme: 4}` // (0-n) // 主题颜色索引 4 （"蓝色，强调项 1"）
`tint`	百分比色调	`{theme: 1, tint: 0.4}` // ("蓝色，强调项 1，浅 40%")

`BORDER_STYLE` {string} 属性

边框样式属性是以下值之一：

dashDotDot
dashDot
dashed
dotted
hair
mediumDashDotDot
mediumDashDot
mediumDashed
medium
slantDashDot
thick
thin

边框注意事项

合并区域的边框需要为该区域内每个单元格分别指定。例如，要为一个 3x3 细胞的合并区域应用边框，需要为八种不同的单元格指定边框样式：

左侧边框（对于左侧的三个单元格）
右侧边框（对于右侧的单元格）
上方边框（对于顶部的单元格）
底部边框（对于左侧的单元格）

感谢 🙏

本项目源自SheetJS/sheetjs，并融合了来自以下代码库的贡献：

sheetjs-style（作者：ShanaMaid）
sheetjs-style-v2（作者：Raul Gonzalez）

所有项目均遵循 Apache 2.0 许可证。

前端导出excel表格并修改导出表格样式