UTF-8 encoding issue when exporting csv file in JavaScript

Question

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.

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

JaskeyLam · Accepted Answer · 2015-08-14 04:34:07Z

79

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

var csv = "\ufeff"+CSV;

answered Aug 14, 2015 at 4:34

JaskeyLam

15.8k23 gold badges128 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohsin Yaqoob Over a year ago

Awesome. It worked. But can you explain the solution a bit?

yAnTar · Accepted Answer · 2022-08-31 08:41:06Z

29

This is my solution:

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

edited Aug 31, 2022 at 8:41

yAnTar

4,64010 gold badges51 silver badges74 bronze badges

answered Nov 20, 2018 at 21:09

Santy SC

5475 silver badges4 bronze badges

Comments

Meshu Deb Nath · Accepted Answer · 2023-03-24 19:49:54Z

5

var csv = "\ufeff"+CSV;

Explanation about this code:

The BOM character (represented by "\ufeff" in JavaScript) is a special Unicode character that indicates the byte order and the encoding scheme of the text.

Some software applications require the BOM character to be present in UTF-8 encoded files to recognize the file as a UTF-8 encoded text file. For example, Microsoft Excel may not recognize a UTF-8 encoded CSV file without a BOM character, and may display the characters incorrectly.

Therefore, adding the BOM character to the CSV data string ensures that the resulting file is recognized as a UTF-8 encoded text file by most software applications, including Excel.

answered Mar 24, 2023 at 19:49

Meshu Deb Nath

1511 gold badge2 silver badges10 bronze badges

Comments

blackgreen · Accepted Answer · 2023-12-01 08:39:49Z

0

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.

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

Separate the field with a tab character instead of comma
Encode the content with UTF16-LE
Prefix the content with UTF16-LE BOM, which is 0xFEFF

edited Dec 1, 2023 at 8:39

blackgreen♦

46.8k29 gold badges171 silver badges162 bronze badges

answered Mar 30, 2020 at 3:27

user8536600

Collectives™ on Stack Overflow

UTF-8 encoding issue when exporting csv file in JavaScript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related