Layui table如何设置导出Excel时的单元格样式

小静大大_4050

小静大大_4050

2026-07-15

644人浏览

原创

layui table.exportfile()不支持样式设置,必须绕过该方法用sheetjs手动构建xlsx文件;layui 2.8+虽支持cellstyle参数,但仅限前端导出且未配置url或type:'csv'时生效,且只接受alignment字段,vertical限填'top'/'center'/'bottom',horizontal限填'left'/'center'/'right'/'fill'/'justify'。

layui table.exportfile() 本身不支持设置单元格样式,所谓“设置样式”必须绕过该方法,改用 sheetjs 原生 api 手动构建 xlsx 文件——否则所有加粗、颜色、对齐、边框等操作都无效。

为什么 exportFile() 传 cellStyle 没反应

常见错误是把 cellStyle 写在 table.render() 配置里,或传给 exportFile() 时结构不对。Layui 2.8+ 确实支持 cellStyle,但仅限于前端导出且未设 url 或 type: 'csv' 的场景:

  • 必须直接在 exportFile() 调用时传入,例如:table.exportFile('myTable', data, { cellStyle: { alignment: { horizontal: 'center' } } })
  • cellStyle 只接受 alignment 字段,且 vertical 只能填 'top'/'center'/'bottom',horizontal 只能填 'left'/'center'/'right'/'fill'/'justify'
  • 写成 'middle'、'justify-left'、带空格的 ' center ' 都会静默失败
  • 若表格配置了 url(服务端导出)或 type: 'csv',cellStyle 完全被忽略

要加粗/变红/设背景色,必须手动生成 XLSX

SheetJS 支持完整样式,但 Layui 封装层没暴露接口。你得自己构造 workbook,并逐个单元格赋值 s 属性:

  • 加粗:cell.s = { font: { bold: true } }
  • 红色字体:cell.s = { font: { color: { rgb: "FF0000" } } }(注意:必须是 6 位大写,"ff0000" 或 "#FF0000" 都无效)
  • 背景色:cell.s = { fill: { fgColor: { rgb: "5C85FB" } } }
  • 边框:cell.s = { border: { top: { style: "thin", color: { rgb: "000000" } }, bottom: { ... }, left: { ... }, right: { ... } } }
  • 所有样式只在 bookType: "xlsx" 下生效;选 "csv" 或 "xls" 会丢弃全部 s

定位目标列对应的所有单元格地址

不能靠列名或字段名直接改,得把字段映射到 Excel 列字母(A/B/C…),再拼出每个单元格地址:

excel-clean
excel-clean

Excel 数据清洗——去重、填补缺失值、格式转换。

下载
  • 先从 table.config['myTable'].cols 找到目标列(如 field: "amount")的索引,比如是第 2 列 → 索引为 1 → Excel 列为 "B"
  • 表头在第 1 行,数据从第 2 行开始,所以 "amount" 列表头是 "B1",第 1 条数据是 "B2",第 2 条是 "B3"……
  • 遍历数据时用 XLSX.utils.encode_cell({ r: i + 1, c: colIndex }) 生成地址更可靠,避免手动拼错(如 i + 2 容易偏移)
  • 表头和数据行需分别处理:B1 是表头,B2~Bn+1 是数据,漏掉任一都会导致部分样式缺失

导出前必须做二进制转换与下载封装

SheetJS XLSX.write() 返回的是字符串,浏览器无法直接识别为 Excel 文件:

  • 必须用 s2ab() 辅助函数转成 ArrayBuffer,否则文件打不开或乱码
  • 下载必须用 saveAs(new Blob([s2ab(...)], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), "xxx.xlsx")
  • IE11 需提前引入 FileSaver.js 和 Blob polyfill
  • 列宽不设会导致中文被截断,必须显式设置 ws['!cols'] = [{ wpx: 120 }, { wpx: 100 }, ...],wch 在中文下不可靠

真正难的不是写几行 s.font.bold,而是整条链路脱离了 Layui 封装:数据提取、sheet 构建、单元格遍历、样式注入、二进制转换、下载触发——任何一环漏掉或写错,导出就无声失败或样式全无。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui excel

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
css3教程
css3教程

php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

1800

10

有哪些css3渐变属性
有哪些css3渐变属性

css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.01

2506

5

excel对比两列数据异同
excel对比两列数据异同

Excel作为数据的小型载体,在日常工作中经常会遇到需要核对两列数据的情况,本专题为大家提供excel对比两列数据异同相关的文章,大家可以免费体验。

2023.07.25

4841

7

excel重复项筛选标色
excel重复项筛选标色

excel的重复项筛选标色功能使我们能够快速找到和处理数据中的重复值。本专题为大家提供excel重复项筛选标色的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.31

2956

5

excel复制表格怎么复制出来和原来一样大
excel复制表格怎么复制出来和原来一样大

本专题为大家带来excel复制表格怎么复制出来和原来一样大相关文章,帮助大家解决问题。

2023.08.02

2740

3

excel表格斜线一分为二
excel表格斜线一分为二

在Excel表格中,我们可以使用斜线将单元格一分为二。本专题为大家带来excel表格斜线一分为二怎么弄的相关文章,希望可以帮到大家。

2023.08.02

1444

3

excel斜线表头一分为二
excel斜线表头一分为二

excel斜线表头一分为二的方法有使用合并单元格功能方法、使用文本框功能方法、使用自定义格式方法。本专题为大家提供excel斜线表头一分为二相关的各种文章、以及下载和课程。

2023.08.02

697

5

绝对引用的输入方法
绝对引用的输入方法

绝对引用允许在公式中引用一个固定的单元格,而不会随着公式的复制和粘贴而改变引用的单元格。本专题为大家提供绝对引用相关内容的文章,大家可以免费体验。

2023.08.09

5128

7

java导出excel
java导出excel

在Java中,我们可以使用Apache POI库来导出Excel文件。本专题提供java导出excel的相关文章,大家可以免费体验。

2023.08.18

6303

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习