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

利用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 结构平行的样式对象指定。
  • 目前支持的样式属性包括:alignmentborderfillfontnumFmt
样式属性 子属性 默认值 描述/值
alignment vertical bottom "top""center""bottom"
horizontal left "left""center""right"
wrapText false truefalse
textRotation 0 0180,或者 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 字体加粗 truefalse
color 字体颜色 COLOR_STYLE
italic false 字体斜体 truefalse
name "Calibri" 字体名称
strike false 字体删除线 truefalse
sz "11" 字体大小(点数)
underline false 字体下划线 truefalse
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} 属性

用于 borderfillfont 的颜色以名称/值对象的形式指定 - 使用以下之一:

颜色属性 描述 示例
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 许可证。

相关推荐
烛阴22 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子25 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三3 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python