Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

Proper data formatting for CSV export

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*

Looks like you need to include the [UTF-8 BOM (Byte-Order Mark)](https://en.wikipedia.org/wiki/Byte_order_mark#UTF-8) 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?](https://dzone.com/articles/what-does-utf-8-bom-mean). *DZone*. [Blog]. Retrieved on 2012年11月12日. 
* simple. [What's different between UTF-8 and UTF-8 without BOM?](https://stackoverflow.com/questions/2223882). *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 = "\uFEFF";
 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');
 }

Draft saved

Draft discarded

Edit Summary*

Cancel

thanks for the snippet but even with the UTF-8 BOM there is still an encoding issue ("É" are now "√â"). Further investigation seems to point out that Excel on OSX is awfully bad at detecting file encoding. I tried using various tools (such as text-encoding and FileSaver.js ) or Blop objects but no luck so far.

kwn
– kwn

2017年01月16日 12:51:27 +00:00
Commented Jan 16, 2017 at 12:51

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

Proper data formatting for CSV export

Answer*