HTML表格导出CSV出现乱码问题的解决方法咨询

问题原因 #

你遇到的 、 这类乱码，本质是UTF-8编码的CSV缺少BOM（字节顺序标记），导致Excel等软件默认用GBK或其他编码解析文件，出现字符解码错误；另外表格中可能存在的特殊空白字符（如全角空格、不间断空格）也会在导出后显示异常。

修复方案 #

1. 给CSV添加UTF-8 BOM #

在生成的CSV字符串开头插入\uFEFF（UTF-8 BOM的Unicode表示），让Excel等软件正确识别UTF-8编码。

2. 清理特殊空白字符 #

把表格中的非标准空白字符（比如\u2003全角空格、\u202F窄不间断空格）统一替换为普通空格，避免导出后显示为乱码字符。

修改后的完整代码 #

exportTable(table_id: string) {
    let separator = ",";
    var rows = document.querySelectorAll("table#" + table_id + " tr");
    var csv = [];
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");
        for (var j = 0; j < cols.length; j++) {
            // 替换所有换行、连续空格，同时清理特殊空白字符
            var data = (cols[j] as HTMLElement).innerText
                .replace(/(\r\n|\n|\r)/gm, "")
                .replace(/[\u2002\u2003\u202F\u00A0]/g, " ") // 替换特殊空白为普通空格
                .replace(/(\s\s)/gm, " ");
            row.push(data);
        }
        csv.push(row.join(separator));
    }
    var csv_string = csv.join("\n");
    // 添加UTF-8 BOM
    csv_string = "\uFEFF" + csv_string;
    
    // 下载逻辑
    var filename = "export_" + table_id + ".csv";
    var link = document.createElement("a");
    link.style.display = "none";
    link.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURIComponent(csv_string));
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

关键改动说明 #

• 在csv_string前拼接\uFEFF：强制让Excel识别文件为UTF-8编码，避免乱码。
• 新增replace(/[\u2002\u2003\u202F\u00A0]/g, " ")：把常见的特殊空白字符替换为普通空格，解决 这类由特殊空格解码错误导致的乱码。
• 移除了不必要的target="_blank"：CSV下载不需要新开标签页。

内容的提问来源于stack exchange，提问作者Ostap Filipenko