讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui数据表格如何实现对导出Excel的字体进行设置

胖辰大大_8997

胖辰大大_8997

发布时间:2026-07-10 06:03:37

|

833人浏览过

|

来源于php中文网

原创

layui的table.exportFile()无法设置Excel字体样式,因其底层仅支持无样式导出;必须引入xlsx.full.min.js,手动生成worksheet并逐单元格配置cell.s.font才能实现字体控制。

table.exportfile() 无法设置导出 excel 的字体——它只导出纯数据,所有样式(包括字体大小、颜色、粗细)都会被忽略。必须绕过这个方法,用 xlsx 原生 api 手动生成带样式的 .xlsx 文件。

为什么直接调用 exportFile 不生效

layui 的 table.exportFile() 底层调用的是 SheetJS 的简易导出路径,仅支持 csv 或无样式的 xlsx,不暴露 cell.s.font 控制权。你传的 cols 和 data 只影响内容,font、color、sz 等字段会被完全丢弃。

  • 即使你在列配置里写 cellStyle: () => ({ css: { 'font-size': '12px' } }),也只作用于页面表格,不影响导出文件
  • 导出后打开 Excel,所有文字都是默认 11 号、常规、黑色——这是 Excel 自动渲染结果,不是 layui 设置的
  • 若引入了 layui 自带的 xlsx.min.js(精简版),它根本不含样式支持模块,s 属性写上去也没效果

手动生成 XLSX 并设置字体的最小可行步骤

核心是用 XLSX.utils.aoa_to_sheet() 或 json_to_sheet() 构建 worksheet,再逐个单元格赋值 cell.s.font。

Excel XLSX Formula Cleanup
Excel XLSX Formula Cleanup

诊断并修复涉及公式、命名范围、Power Query 刷新、数据透视表、VBA/宏保存等问题的 Microsoft Excel XLSX 工作簿

下载
  • 必须引入完整版:<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>(不能用 layui 自带的精简版)
  • 表头和数据行要分开处理:第 1 行(A1, B1…)设表头字体;从第 2 行起(A2, B2…)设数据字体
  • 字体大小用 sz(单位为磅),加粗用 bold: true,颜色用 color: { rgb: "FF0000" }(6位大写,无 #)
  • 示例:让“金额”列(假设是第 3 列 → Excel 列为 C)所有数据单元格字体为 12 号、加粗、红色:
    for (let i = 0; i < data.length; i++) {
      const addr = `C${i + 2}`;
      if (ws[addr]) {
        ws[addr].s = { font: { sz: 12, bold: true, color: { rgb: "FF0000" } } };
      }
    }

容易漏掉的关键细节

少一个环节,字体就不会显示:

  • bookType: "xlsx" 必须显式指定——选 "csv" 或 "xls" 会彻底丢弃 s 样式
  • ws[cellRef].s 必须直接赋值,不能只改 ws[cellRef].v 或 ws[cellRef].t
  • 中文表头易被截断?得手动设 ws['!cols'] = [{ wpx: 120 }, { wpx: 100 }, ...],否则字体再大也看不见全字
  • 导出前必须调用 XLSX.write(wb, { type: "binary", bookType: "xlsx" }) —— 用 type: "array" 或 "buffer" 会导致样式丢失

真正麻烦的不是写几行 font 配置,而是整个流程已脱离 layui 封装:数据提取、sheet 构建、单元格遍历、样式注入、二进制转换、Blob 下载……每一步都要自己兜底,缺一不可。

热门AI工具

更多
PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

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

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

5581

2023.07.25

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

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

3496

2023.07.31

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

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

3280

2023.08.02

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

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

1444

2023.08.02

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

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

717

2023.08.02

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

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

5148

2023.08.09

java导出excel
java导出excel

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

7343

2023.08.18

excel输入值非法
excel输入值非法

在Excel中,当输入的数值非法时,有以下多种处理方法。本专题为大家提供excel输入值非法的相关文章,大家可以免费体验。

1781

2023.08.18

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

120

2026.10.22

热门下载

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

精品课程

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

共87课时 | 13.1万人学习

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

共89课时 | 11.4万人学习

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

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn