UTF-8 csv encoding

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?

What's consuming the CSV content in the window you create? Is the browser just trying to show the CSV as text, or does it launch some other program (Excel or whatever)? — Pointy, Jan 06 '15 at 15:52
It launches Excel, needles to say the versions i use are Hebrew. — TonalDev, Jan 06 '15 at 15:53
Microsoft Office notoriously sucks when it comes to encodings, just FYI. — deceze, Jan 07 '15 at 13:39

score 3 · Answer 1 · answered Jan 25 '16 at 21:17

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.

Thanks. String.fromCharCode(0xFEFF) at the beginning worked – Dror Bar Jan 20 '20 at 17:12 — Dror Bar, Jan 20 '20 at 17:12

score 3 · Answer 2 · answered Aug 31 '17 at 02:32

The only thing to do is add the "\ufeff" 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.

score 2 · Answer 3 · answered Jan 07 '15 at 13:34

Excel does not automatically recognise the encoding of UTF-8 documents. To achieve this, you need to add a UTF-8 BOM ("\uefbbbf") 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".

UTF-8 csv encoding

3 Answers3