导出CSV中文乱码本质是编码不匹配:Layui默认UTF-8生成,Windows版Excel默认用GBK打开。解决方案有两种:一是用iconv-lite前端转GBK字节流再导出;二是UTF-8加BOM头(\ufeff)强制Excel识别。
导出CSV时中文变成问号或方块?本质是编码没对上
layui 的 table.exportfile 默认用 utf-8 编码生成 csv,但 excel(尤其是 windows 版)默认用 ansi(即系统本地编码,比如 gbk)打开 csv,两者不匹配就必然乱码。这不是 layui 的 bug,是 csv 文件本身没有编码声明,excel 纯靠猜测——它猜错了。
直接改 exportFile 的 type 参数没用
很多人试过把 type 改成 "csv" 或加 charset=gbk,没效果。因为 table.exportFile 底层走的是 Blob + download,它只控制文件名和 MIME 类型,不干预内容编码。你传进去的数据是什么字节,它就原样写进文件。
- 传入的 JSON 数据必须提前转成 GBK 字节流(不是字符串)
- 浏览器原生不支持 GBK 编码,得靠第三方库(如
iconv-lite)在前端完成编码转换 - 不能依赖后端:如果导出逻辑全在前端,后端根本没参与,改后端配置无效
用 iconv-lite 在前端转码再导出
这是目前最稳、纯前端可落地的方案。核心是:把表格数据拼成 CSV 字符串 → 用 iconv-lite 转成 GBK 编码的 Uint8Array → 构造 GBK 编码的 Blob → 触发下载。
const csvStr = "姓名,城市\n张三,北京\n李四,上海";
const gbkBytes = iconv.encode(csvStr, 'gbk');
const blob = new Blob([gbkBytes], { type: 'text/csv;charset=gbk' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '用户列表.csv';
a.click();
URL.revokeObjectURL(url);
-
iconv-lite必须引入完整版(非精简版),否则不支持 GBK -
Blob的type写'text/csv;charset=gbk'是给开发者看的,Excel 不认这个,但它能避免某些浏览器二次解析出错 - 注意:Mac 版 Excel 习惯用 UTF-8 打开 CSV,所以 GBK 编码文件在 Mac 上可能又乱码——得提醒用户用「文本编辑」先转码,或提供双版本下载
更轻量的替代方案:UTF-8 + BOM 头
如果不想引入 iconv-lite,可以给 CSV 字符串开头加上 UTF-8 BOM(\ufeff)。Windows Excel 看到 BOM 就会强制按 UTF-8 解析,中文就能正常显示。
const csvStr = '\ufeff姓名,城市\n张三,北京\n李四,上海';
const blob = new Blob([csvStr], { type: 'text/csv;charset=utf-8' });
- 简单有效,零依赖,适合快速修复
- 缺点:BOM 严格来说不属于 CSV 标准,某些老旧系统或脚本读取时可能报错或跳过首字段
- 别用
escape或encodeURI处理字符串——那会破坏 CSV 结构,Excel 打不开










