Layui表格导出CSV文件乱码问题怎么解决

加BOM头（EF BB BF）可解决Windows版Excel打开UTF-8 CSV中文乱码问题，因其依赖BOM识别编码；无BOM时Excel默认按GBK解析，导致乱码；Mac版Excel则可能将BOM误显为字符，需视用户环境选择方案。

直接加 ufeff bom 头是最简单、零依赖、且 windows excel 能立刻识别的方案；如果必须用 gbk（比如对接老旧内部系统），就得引入 iconv-lite 做前端字节转码——浏览器本身不支持 gbk 编码，光改字符串没用。

为什么加 BOM 头就能解决乱码

Windows 版 Excel 打开 CSV 时根本不看文件后缀或 Content-Type，它靠“猜”：没 BOM 就默认按系统 ANSI（如 GBK）解析，UTF-8 字符串一读就崩。加上 ufeff（即 UTF-8 BOM 的三字节 EF BB BF），Excel 立刻认出这是 UTF-8，中文就正常显示。

• 只需在拼 CSV 字符串前加 'ufeff'，例如：const csvStr = 'ufeff姓名,城市n张三,北京';
• Blob 的 type 写 'text/csv;charset=utf-8' 是给开发者看的，Excel 不认这个，但能避免某些浏览器二次解析出错
• Mac 版 Excel 默认用 UTF-8，BOM 反而可能被当成普通字符显示——所以如果用户群含 Mac，得额外提醒或提供双版本

用 iconv-lite 转 GBK 字节流才真正“兼容旧系统”

有些企业内网系统强制要求 GBK 编码 CSV，BOM 头不管用。这时候不能只传字符串，必须把 UTF-8 字符串转成 GBK 编码的原始字节（Uint8Array），再构造 Blob。

• 必须引入完整版 iconv-lite（npm 包名就是 iconv-lite），精简版不支持 GBK
• 关键不是 iconv.encode(str, 'gbk') 返回字符串，而是它返回的是 Uint8Array，这才是真正的 GBK 字节流
• Blob 构造时传入该字节数组，type 设为 'text/csv;charset=gbk'，否则部分浏览器会尝试 UTF-8 解析字节
• 别想用 exportFile 的 type: 'csv' 参数绕过——它只控制 MIME 类型和文件名，不干预内容编码

导出时中文文件名也乱码？别信 filename 参数

Layui 的 table.exportFile() 里传 filename: '用户列表.csv' 在 IE/旧 Edge 上基本无效，因为 Content-Disposition 的 UTF-8 文件名支持极差。必须手动走 Blob + URL.createObjectURL 流程。

• 用 document.createElement('a') 创建下载链接，a.download 直接赋值中文字符串（现代浏览器都支持）
• csvStr 仍要带 ufeff BOM，否则 Excel 打开内容还是乱码
• 记得调用 URL.revokeObjectURL(url) 清理内存，尤其高频导出场景
• 如果用 table.on('toolbar(filter)') 拦截按钮，一定要 return false 阻止默认导出，再走这套逻辑

最常被忽略的一点：BOM 头虽简单，但严格来说不属于 CSV 标准，某些老旧数据脚本或 ETL 工具读取时可能跳过首行或报错；而 GBK 方案又必须引入第三方库、增加包体积。选哪个，得看你实际对接的是人（Excel 用户）还是机器（下游系统）。