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

Windows版Excel打开UTF-8 CSV文件中文乱码？添加BOM头（EF BB BF）是最佳解决方案

为CSV字符串添加\ufeffBOM前缀，是解决Windows Excel中文乱码最直接、零依赖的方法。此方案能立即被Windows版Excel识别并正确显示中文。然而，若需对接强制要求GBK编码的遗留系统，则需采用iconv-lite库在前端进行编码转换，因为浏览器原生不支持GBK编码，仅修改字符串无法实现编码转换。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

BOM头解决Excel中文乱码的原理

问题根源在于Windows版Excel的编码识别机制。它在打开CSV文件时，不会依据文件扩展名或HTTP头部的Content-Type判断编码，而是依赖文件开头的字节顺序标记（BOM）。若无BOM，Excel默认使用系统ANSI编码（中文Windows下为GBK）解析文件，导致UTF-8编码的中文字符出现乱码。在文件起始位置添加\ufeff（对应UTF-8 BOM的EF BB BF三个字节），Excel便能准确识别为UTF-8编码，从而正常显示中文内容。

• 实现方法：在生成CSV字符串前，直接拼接'\ufeff'前缀。示例：const csvStr = '\ufeff姓名,城市\n张三,北京';
• Blob类型设置：使用Blob构造文件时，建议将type属性设为'text/csv;charset=utf-8'。此设置主要面向开发者及其他浏览器，虽不影响Excel识别，但可避免部分浏览器对内容进行错误解析。
• Mac版Excel兼容性注意：macOS版Excel默认支持UTF-8编码，添加BOM可能导致文件首行显示一个额外字符。若用户包含Mac用户，需考虑提供无BOM版本或进行环境检测。

使用iconv-lite进行GBK编码转换以兼容旧系统

当对接方系统强制要求GBK编码时，仅添加BOM无法解决问题。此时核心在于将UTF-8字符串转换为GBK编码的原始字节流（Uint8Array），并用该字节数组创建Blob对象。

• 依赖引入：需安装完整版iconv-lite（npm包名即为iconv-lite），其精简版通常不包含GBK编码支持。
• 核心转换：调用iconv.encode(str, 'gbk')方法。注意其返回值是Uint8Array类型的字节数组，而非字符串。
• Blob构造：使用上述字节数组创建Blob时，务必指定type为'text/csv;charset=gbk'，以防止浏览器误用UTF-8解码GBK字节流。
• Layui导出限制：Layui的exportFile方法中的type: 'csv'参数仅控制MIME类型和文件后缀，不处理文件内容的实际编码，因此无法用于解决编码问题。

导出文件时中文文件名乱码的解决方案

另一个常见问题是导出的CSV文件中文名称显示乱码。单纯依赖Layui的table.exportFile()方法的filename参数，在IE或旧版Edge浏览器中往往无效，因其对Content-Disposition头部中的UTF-8文件名支持不佳。更可靠的方案是手动创建Blob对象并使用URL.createObjectURL生成下载链接。

• 创建下载链接：通过document.createElement('a')创建隐藏的标签，并直接为其download属性赋予中文字符串作为文件名。现代浏览器均能良好支持此方式。
• 内容编码处理：用于下载的csvStr仍需包含\ufeffBOM头，以确保Excel打开时内容无乱码。
• 资源释放：下载完成后，务必调用URL.revokeObjectURL(url)释放创建的Object URL，避免内存泄漏，这在频繁导出的场景中尤为重要。
• 拦截默认行为：若通过table.on('toolbar(filter)')事件拦截导出按钮，必须在事件处理函数中return false以阻止Layui默认的导出逻辑，然后执行自定义的导出流程。