CSV 导出的正确数据格式

Question

我目前正在使用特定的 utf-8 编码将数据（在客户端）导出到 CSV

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

数据在 arr 中，看起来像：

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

效果很好，当我在 Excel 中导入生成的文件时出现编码错误（例如 É -> É），但是当我在 Sublime Text 中打开文件时，一切看起来都很好。

Answer 1

看起来您需要在逗号之后和数据开始之前包含UTF-8 BOM (Byte-Order Mark)。三字节序列：[0xEF, 0xBB, 0xBF]。

Microsoft 编译器和解释器以及 Microsoft Windows 上的许多软件（例如记事本）将 BOM 视为必需的幻数，而不是使用启发式方法。这些工具在将文本保存为 UTF-8 时会添加 BOM，除非 BOM 存在或文件仅包含 ASCII 字节，否则无法解释 UTF-8。

查看这些文章/帖子了解更多信息。

• 邓Z.What Does UTF-8 With BOM Mean?。 DZone。 [博客]。检索于 2012 年 11 月 12 日。
• 简单。 What's different between UTF-8 and UTF-8 without BOM?。 堆栈溢出。检索于 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');
}