layui table怎么导出为Excel文件并保留自定义格式

云雪姑娘_8346

云雪姑娘_8346

2026-11-05

131人浏览

原创

layui table.exportFile() 无法保留自定义格式,因其导出的是伪装成Excel的纯文本(CSV或旧版XLS),仅支持原始数据导出;需用SheetJS生成真实xlsx或导出CSV字符串来保格式。

layui table怎么导出为excel文件并保留自定义格式

table.exportFile() 无法保留自定义格式,这是设计限制

layui 内置的 table.exportFile() 本质是把数据转成 CSV 或简单 XLS(二进制老格式),不支持单元格样式、日期格式、千分位、文本强制对齐等 Excel 原生能力。它导出的“xls”文件其实是用 tab 分隔的文本伪装成 Excel,Excel 打开时会自动猜测类型——所以你看到的数字变科学计数法、日期变时间戳、金额丢掉逗号,不是 bug,是预期行为。

如果你在表头用了 templet 渲染了「¥12,345.67」,导出时仍得到原始 12345.67,因为 exportFile 读的是 table.cache['id'] 里的原始值,不是 DOM 文本。

要真正控制 Excel 格式,必须绕过 exportFile,用 SheetJS

SheetJS(xlsx)是目前前端最可靠的 Excel 操作库,能写入真实 .xlsx 文件,并精确控制列类型、单元格格式、宽度等。关键步骤如下:

  • 引入完整版:<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>
  • 从 table.cache['yourTableId'] 取原始数据(比 table.config.data 更准,尤其分页后)
  • 对日期字段转为 Date 实例:如 new Date(item.applyTime);字符串时间先 .replace(/-/g, '/') 避免 Safari 解析失败
  • 对数字字段加千分位时,若导出为 xlsx,必须加单引号前缀变成文本:'12,345.67',否则 Excel 会自动转回数值并删逗号
  • 用 XLSX.utils.aoa_to_sheet([headers, ...rows]) 构造 sheet,再调 XLSX.writeFile(ws, 'xxx.xlsx')

导出 CSV 能保千分位和字符串格式,但不能设日期类型

CSV 是纯文本,没有“单元格格式”概念。只要你导出的是字符串 "2024/10/03" 或 "'12,345.67",Excel 打开就原样显示。但这也意味着:

Excel公式大师(兼容WPS)
Excel公式大师(兼容WPS)

Excel/WPS 公式大师。用大白话描述需求,直接给出可用的公式、函数组合和数据处理方案,并解释每一段的作用。当用户提到"Excel 公式"、"表格函数"、"VLOOKUP 怎么用"、"XLOOKUP"、"LET"、"LAMBDA"、"动态数组"、"这个公式报错了"、"#N/A"、"#REF!"、&quot

下载
  • 日期不会被 Excel 自动识别为日期类型(右键单元格→设置格式→日期才生效)
  • 如果后端返回的是时间戳 1712345678000,导出前不转成 "2024/10/03" 字符串,Excel 就只显示那串数字
  • 不同区域设置下,2024-10-03 可能被误判为文本或错误日期,推荐统一用 YYYY/MM/DD 格式

复杂场景建议后端导出,前端只传参触发

当表格启用了服务端分页、权限过滤、多表关联查询,或需要统一模板(比如固定表头、LOGO、合并单元格、条件格式),前端拼接数据既不可靠又容易卡死(尤其 >5 万行)。此时应:

  • 前端调接口:fetch('/api/export?ids=1,2,3&format=xlsx')
  • 后端用 POI(Java)、openpyxl(Python)或 ExcelJS(Node)生成真实 Excel
  • 后端可精确控制每列数据类型(如 cell.dataType = 'date')、数字格式(#,##0.00)、字体颜色、列宽

真正难的不是“怎么导出”,而是“谁来保证导出的数据和页面看到的一致”。这个一致性,在服务端做远比在浏览器里 patch 各种 toLocaleString 和单引号更稳。

相关文章

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

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

下载

相关标签:

layui表格 layui excel

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2843

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

6163

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

7090

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6898

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

983

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

3260

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

3093

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

热门下载

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

精品课程

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

共87课时 | 13.1万人学习

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

共89课时 | 11.4万人学习

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

共5课时 | 1.6万人学习