UTF-8 CSV编码

Question

I have a page that functions as a cognitive test for a study i'm doing.

The JS file outputs a CSV file with a detailed results of the tests.

Some of the text is in Hebrew and the CSV shows gibberish in Excel.

I tried the following method:

var csvContent = "data:text/csv;charset=utf-8,";

But i get the same result:

׳©׳—׳•׳¨    ׳¡׳’׳•׳ gray
׳©׳—׳•׳¨    ׳™׳¨׳•׳§    yellow
׳©׳—׳•׳¨    ׳׳“׳•׳  pink
׳׳₪׳•׳¨ ׳׳₪׳•׳¨ purple
׳™׳¨׳•׳§    ׳›׳×׳•׳ #FE642E
׳™׳¨׳•׳§    ׳¦׳”׳•׳‘    red
׳׳₪׳•׳¨ ׳©׳—׳•׳¨    pink
׳׳₪׳•׳¨ ׳›׳×׳•׳ gray
׳™׳¨׳•׳§    ׳¦׳”׳•׳‘    purple
׳׳“׳•׳  ׳׳₪׳•׳¨ pink

• The whole code on JSFiddle

What am i doing wrong?

Answer 1

Excel does not automatically recognise the encoding of UTF-8 documents. To achieve this, you need to add a UTF-8 BOM ("\bf") to the very start of the file.

You can also validate the encoding of the csv file with a Notepad++ before opening in Excel. Without the BOM, Notepad++ should mark the type as "UTF-8 w/o BOM". With the BOM, it will show "UTF-8".

Answer 2

As Alastair pointed out, you will want to have a BOM at the beginning of the file if you want excel to behave correctly. But I believe it should be specified differently. Here is a complete working example of how to download (already encoded) a csv file that was built in the browser:

// not needed with firefox, chrome, ie11:
// window.URL = window.URL || window.webkitURL;

var data = "a,column b,c\nНикола Тесла,234,365";

// add UTF-8 BOM to beginning so excel doesn't get confused.
// *THIS IS THE KEY*
var BOM = String.fromCharCode(0xFEFF);
data = BOM + data;

var btn = document.createElement("button");
btn.appendChild(document.createTextNode("Click Me!"));
btn.onclick = function() {
  var blob = new Blob([data], {type:  "text/csv;charset=UTF-8"});
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {

    // ie
    var success = window.navigator.msSaveOrOpenBlob(blob, "Name of File.csv");
    if (!success) {
      alert("Failed");
    }
  } else {

    // not ie
    var a = document.createElement("a");
    a.href = window.URL.createObjectURL(blob);
    a.download = "Name of File.csv";
    document.body.appendChild(a);
    a.click();

    // is there a problem with removing this from the DOM already?
    a.parentNode.removeChild(a);
  }
};
document.body.appendChild(btn);

The above works in current Firefox, Chrome, and IE11 -- if you open with excel, you will see Nicola Tesla's name in Serbian Cyrillic.

Answer 3

The only thing to do is add the "\" at the beginning of your csv string:

var csv = "\ufeff"+CSV;

Same answer from here: same answer

I found the solution from here: similar problem and solution

I put them here just in case you are searching for a solution.