利用xlsx-js-style插件灵活设置表头样式、单元格合并、字体大小以及主体文字水平居中等
1、安装
通过 npm 安装 xlsx-js-style:
npm install xlsx-js-style
在浏览器中安装:
xml
<script src="dist/xlsx.bundle.js"></script>
2、核心 API
- 参考 SheetJS 的文档获取核心 API 引用。
- 当前使用的 SheetJS 版本:0.18.5
3、样式 API
3.1单元格样式示例
yaml
// 步骤 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,并融合了来自以下代码库的贡献:
所有项目均遵循 Apache 2.0 许可证。