Layui表格导出功能如何自定义导出文件的编码(如UTF-8)

陌雪同学_6632

陌雪同学_6632

2026-04-21

941人浏览

原创

Layui导出Excel中文乱码的根本原因是未添加UTF-8 BOM(\ufeff),导致Excel误判编码;解决方法是在CSV内容开头手动插入BOM,并用exportFile('f.csv', csvContent, 'csv')传入,确保字符串无前置空格、字段正确转义。

导出Excel时中文乱码,是因为Layui默认用GBK编码

layui的table.exportfile方法底层调用的是原生链接下载,不经过后端,生成的csv/excel内容默认按系统编码(windows下通常是gbk)写入,导致utf-8环境打开乱码。这不是浏览器或excel的问题,是layui构造数据时没声明bom和编码。

实操建议:

  • 导出CSV时,必须在内容开头插入UTF-8 BOM(\ufeff),否则Excel会误判为ANSI
  • 不要指望改charset响应头——前端触发的data: URL不走HTTP协议,header无效
  • 如果导出格式指定为excel(即.xlsx),Layui实际仍生成CSV文本再伪装后缀,所以BOM同样必要
  • 避免用exportFile直接导出含中文的纯文本表格,优先改用exportFile('filename.csv', csvContent, 'csv')手动传入带BOM的内容

手动构造CSV并注入BOM:最稳的UTF-8导出方式

绕过table.exportFile自动拼接逻辑,自己组装CSV字符串,能完全控制编码行为。关键就是第一行前加\ufeff,且确保整个字符串是UTF-16LE或UTF-8(JS字符串默认UTF-16,但Excel识别\ufeff为UTF-8 BOM)。

示例代码片段:

const data = table.cache['your-table-id']; // 获取当前表格数据
const headers = ['姓名', '邮箱', '部门']; // 手动定义表头,避免字段名含逗号换行等
const csvRows = [headers.map(s => `"${s}"`).join(',')];

data.forEach(row => {
  const values = headers.map(key => {
    let v = row[key] || '';
    if (typeof v === 'string') v = v.replace(/"/g, '""'); // CSV转义双引号
    return `"${v}"`;
  });
  csvRows.push(values.join(','));
});

const csvContent = '\ufeff' + csvRows.join('\n'); // ✅ 关键:BOM放最开头
table.exportFile('员工列表.csv', csvContent, 'csv');

注意点:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • \ufeff必须紧贴字符串开头,前面不能有空格、换行或任何字符
  • 字段值含换行符(\n)或双引号时,必须用双引号包裹,且内部双引号要转义为""
  • 不要用encodeURI或encodeURIComponent处理整个CSV——这会破坏BOM和结构

为什么不用xlsx.js或SheetJS?Layui场景下的取舍

有人想用xlsx库生成真Excel(.xlsx),确实能彻底避开编码问题,但引入额外依赖在Layui老项目里常带来冲突:比如Layui 2.x自带jQuery 1.x,而新版xlsx依赖Promise或现代API,容易报Cannot read property 'prototype' of undefined。

如果你必须用.xlsx:

  • 选兼容版:https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js(0.18.x对IE支持好)
  • 生成后别用table.exportFile,改用saveAs(需额外引入file-saver)
  • 注意workbook.SheetNames和sheet_to_csv的字段顺序要跟Layui表头一致,否则列错位
  • 性能上,千行以上数据+复杂样式时,前端生成.xlsx比纯CSV慢3–5倍,移动端可能卡顿

导出按钮绑定后,点击没反应?检查这三处

常见静默失败不是编码问题,而是导出链路中断:

  • 确认table.render()里设置了id,且exportFile调用时传的ID跟它严格一致(区分大小写)
  • 检查浏览器控制台是否报RangeError: Maximum call stack size exceeded——这是你传给exportFile的content是对象而非字符串,JS试图JSON.stringify循环引用对象
  • 如果用了done回调里调用导出,确保回调中没有再次触发table.reload(),否则cache可能被清空,table.cache[xxx]返回undefined
BOM那一个字符看着不起眼,但漏了它,所有后续努力都会在Excel里变成乱码——而且这个错误不会报错,只会安静地显示“涓枃”或者方块。

相关文章

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

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

下载

相关标签:

layui

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

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

1975

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2662

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

916

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

2959

7

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

3511

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

5788

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

754

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

634

12

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

2025.12.30

333

8

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Fitten Code官方手册
Fitten Code官方手册

共0课时 | 0人学习

CodeGeex使用手册
CodeGeex使用手册

共0课时 | 0人学习

通义灵码手册
通义灵码手册

共0课时 | 0人学习