前端导出CSV时中文乱码怎么办？

司马志欣提问于 2026-03-16 19:37:18 阅读 70

交互

我在用 JavaScript 做 CSV 导出功能，数据里有中文，但下载后用 Excel 打开全是乱码。试过加 BOM 头，但好像没生效？

目前是这样生成的：

const csvContent = "data:text/csv;charset=utf-8," + encodeURIComponent(csv);
const link = document.createElement("a");
link.href = csvContent;
link.download = "data.csv";
link.click();

是不是少了什么关键步骤？

我来解答赞 10 收藏

反馈

1 条解答

ლ纪娜 Lv1

你这个问题很典型，问题出在 encodeURIComponent 这货身上。

encodeURIComponent 会把所有字符都转成 %E4%B8%AD%E6%96%87 这种百分号编码，Excel 可不会自动给你解码，看到的自然就是乱码。

正确的做法是这样的：

const BOM = 'uFEFF'; // UTF-8 BOM 头，Excel 识别这个才知道是 UTF-8

const csvContent = BOM + csv;

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

const link = document.createElement("a");

link.href = URL.createObjectURL(blob);

link.download = "data.csv";

link.click();

URL.revokeObjectURL(link.href); // 用完释放内存

关键点就两个：

一是别用 encodeURIComponent，直接用 Blob 来处理二进制数据。二是必须加 BOM 头（就是那个 uFEFF），Excel 在没有 BOM 的情况下默认用系统编码打开 GB2312 之类的，带了 BOM 它才知道这是 UTF-8。

你之前说加 BOM 没生效，大概率是因为加了 BOM 之后还套了 encodeURIComponent，那 BOM 也被编码成乱码了。

另外提一嘴，data:text/csv 这种方式在某些浏览器下可能不稳定，Blob + URL.createObjectURL 是更稳妥的方案。

2026-03-17 01:00