在 JavaScript 中导出 csv 文件时出现 UTF-8 编码问题

Question

我在JavaScript中使用下面的函数将数组导出到csv文件，但是在Windows7中使用Microsoft Excel 2013，中文字符变成了乱码。

我用记事本打开导出的文件，但它显示得很好。

function arrayToCSVConvertor(arrData, reportTitle) {
    var CSV='';
    arrData.forEach(function(infoArray, index){
        var dataString = infoArray.join(",");
        dataString= dataString.split('\n').join('；');
        CSV += dataString+ "\n";
    });

    if (CSV == '') {
        alert("Invalid data");
        return;
    }

    //create a link and click, remove
    var link = document.createElement("a");
    link.id="lnkDwnldLnk";

    //this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);

    var csv = CSV;

    var blob = new Blob([csv], { type: ' type: "text/csv;charset=UTF-8"' });//Here, I also tried charset=GBK , and it does not work either
    var csvUrl = createObjectURL(blob);

    var filename = reportTitle+'.csv';

    if(navigator.msSaveBlob){//IE 10
        return navigator.msSaveBlob(blob, filename);
    }else{
        $("#lnkDwnldLnk")
            .attr({
                'download': filename,
                'href': csvUrl
            });
        $('#lnkDwnldLnk')[0].click();
        document.body.removeChild(link);
    }
}

Answer 1

通过在 csv 字符串开头添加 BOM 解决了问题：

var csv = "\ufeff"+CSV;

Answer 2

这是我的解决方案：

var blob = new Blob(["\uFEFF"+csv], {
    type: 'text/csv; charset=utf-8'
});

Answer 3

var csv = "\ufeff"+CSV;

关于此代码的说明：

BOM 字符（在 JavaScript 中用“\ufeff”表示）是一种特殊的 Unicode 字符，表示文本的字节顺序和编码方案。

某些软件应用程序要求 UTF-8 编码的文件中存在 BOM 字符，才能将该文件识别为 UTF-8 编码的文本文件。例如，Microsoft Excel 可能无法识别没有 BOM 字符的 UTF-8 编码的 CSV 文件，并且可能无法正确显示字符。

因此，将 BOM 字符添加到 CSV 数据字符串可确保生成的文件被大多数软件应用程序（包括 Excel）识别为 UTF-8 编码的文本文件。

Answer 4

根据 RFC2781，字节顺序标记 (BOM) 0xFEFF 是 UTF-16 小端编码 (UTF16-LE) 的 BOM。虽然添加 BOM 可能会解决 Windows 的问题，但如果要在 MacOS 上使用 Excel 打开生成的 CSV 文件，问题仍然存在。

编写跨不同操作系统平台（Windows、Linux、MacOS）工作的多字节 CSV 文件的解决方案应用以下三个规则：

1. 使用制表符而不是逗号分隔字段
2. 使用 UTF16-LE 对内容进行编码
3. 内容加上UTF16-LE BOM前缀，即0xFEFF

更详细的阐述、示例代码和用例可以参见本文