CSV导出的正确数据格式

Question

I'm currently exporting data (on the client side) to CSV, with specific utf-8 encoding

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

arr.forEach(function(infoArray, index){

    var dataString = infoArray.join(",");
    csvContent += index < arr.length ? dataString+ "\n" : dataString;

});

var encodedUri = encodeURI(csvContent);


var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data.csv");
document.body.appendChild(link);

link.click(); 

The data is in arr and looks like :

[{'firstname':'John', 'surname':'Doe', 'city':'Paris'}, ... , {'firstname':'Johnny', 'surname':'Done', 'city':'Paris'}]

It works pretty well expect that when I'm importing the resulting file in Excel I have encoding error (É -> É for example), but when I open the file in Sublime Text everything looks fine.

Answer 1

Looks like you need to include the UTF-8 BOM (Byte-Order Mark) after the comma and before the start of the data. Three-byte sequence: [0xEF, 0xBB, 0xBF] .

Microsoft compilers and interpreters, and many pieces of software on Microsoft Windows such as Notepad treat the BOM as a required magic number rather than use heuristics. These tools add a BOM when saving text as UTF-8, and cannot interpret UTF-8 unless the BOM is present, or the file contains only ASCII bytes.

Check out these articles/posts for more info.

• Deng, Z. What Does UTF-8 With BOM Mean? . DZone . [Blog]. Retrieved on 2012-11-12.
• simple. What's different between UTF-8 and UTF-8 without BOM? . Stack Overflow . Retrieved on 2010-02-08.

 var personArr = [ { firstname: 'John', surname: 'Doe', city: 'Paris' }, // ... , { firstname: 'James', surname: 'Brown', city: 'Barnwell' } ]; var csvData = jsonToCsv({ data : personArr }); var downloadLinkEle = createDownloadLink(csvData, 'people.csv'); document.body.appendChild(downloadLinkEle); function createDownloadLink(content, filename, text) { text = text || filename; var link = document.createElement('a'); link.setAttribute('href', encodeURI(content)); link.setAttribute('download', filename); link.innerHTML = text; return link; } function jsonToCsv(opts) { var BOM = "\"; opts.data = opts.data || []; opts.columns = opts.columns || []; opts.delim = opts.delim || ','; opts.headers = opts.headers || [ 'text/csv', 'charset=utf-8' ]; if (opts.columns.length < 1 && opts.data.length > 0) { opts.columns = Object.keys(opts.data[0]); } return 'data:' + opts.headers.join(';') + ',' + BOM + [ opts.columns.join(opts.delim), opts.data.map(rec => opts.columns.map(col => rec[col]).join(opts.delim)).join('\\n') ].join('\\n'); }