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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31959487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 14:38:57  来源:igfitidea点击:

UTF-8 encoidng issue when exporting csv file , JavaScript

javascriptcsvcharacter-encodingmime-types

提问by Jaskey

I use the below function to export an array to a csv files in JavaScript, but the Chinese characters become messy code with Microsoft Excel 2013 in Windows7.

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

I open the exported file with a notepad but it displays finely.

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

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);
    }
}

回答by Jaskey

Problem solved by adding BOM at the start of the csv string:

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

var csv = "\ufeff"+CSV;

回答by Santy SC

This is my solution:

这是我的解决方案:

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

回答by mikaelfs

According to RFC2781, the byte order mark (BOM) 0xFEFF is the BOM for UTF-16 little endian encoding (UTF16-LE). While adding the BOM may resolve the issue for Windows, the problem still exists if one is about to open the generated CSV file using Excel on MacOS.

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

A solution for writing a multibyte CSV file that works across different OS platforms (Windows, Linux, MacOS) applies these three rules:

编写适用于不同操作系统平台(Windows、Linux、MacOS)的多字节 CSV 文件的解决方案应用了以下三个规则:

  1. Separate the field with a tab character instead of comma
  2. Encode the content with UTF16-LE
  3. Prefix the content with UTF16-LE BOM, which is 0xFEFF
  1. 用制表符而不是逗号分隔字段
  2. 使用 UTF16-LE 对内容进行编码
  3. 使用 UTF16-LE BOM 作为内容前缀,即 0xFEFF

More detailed elaboration, sample code, and use cases can be seen in this article

更详细的阐述、示例代码和用例可以在这篇文章中看到