前端导出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 许可证。

相关推荐
sophie旭20 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享20 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom20 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室20 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣21 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻21 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
小牛itbull21 小时前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron
闲蛋小超人笑嘻嘻1 天前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
rggrgerj1 天前
Vue3 组件完全指南代码
前端·javascript·vue.js
golang学习记1 天前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端