动态 CSV 生成的带有 UTF 字符的文件下载

Question

所以我有这段代码可以从任何具有匹配键的对象数组动态创建下载（我从另一个 SO 问题中得到它，我很想感谢作者，但我找不到 link):

var objectToCSVRow = function(dataObject) {
  var dataArray = new Array;
  for (var o in dataObject) {
    var innerValue = dataObject[o]===null?'':dataObject[o].toString();
    var result = innerValue.replace(/"/g, '""');
    result = '"' + result + '"';
    dataArray.push(result);
  }
  return dataArray.join(';') + '\r\n';
}

var exportToCSV = function(arrayOfObjects) {
  if (!arrayOfObjects.length) {
    return;
  }
  var csvContent = "data:text/csv;charset=utf-8,";

  // headers
  csvContent += objectToCSVRow(Object.keys(arrayOfObjects[0]));

  arrayOfObjects.forEach(function(item){
    csvContent += objectToCSVRow(item);
  }); 

  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "customers.csv");
  document.body.appendChild(link); // Required for FF
  link.click();
  document.body.removeChild(link); 
}

它工作正常，但是当我尝试包含 UTF-8 字符时：

exportToCSV([{spanishChars:"ñé"}])

encodeURI() 函数对它们进行编码，我得到这个：

有没有一种方法可以在不使用 encodeURI() 的情况下创建可下载的内容，或者至少有一种方法可以让 encodeURI() 使用特殊字符？

提前致谢

Answer 1

您需要在 CSV 的第一行添加 BOM 字符。

  var csvContent = "data:text/csv;charset=utf-8,";
  // add BOM - always on the first line of the csv
  csvContent += '\uFEFF';
  // headers
  csvContent += objectToCSVRow(Object.keys(arrayOfObjects[0]));

动态 CSV 生成的带有 UTF 字符的文件下载

Dynamic CSV generated file downloads with UTF characters

javascript

encodeuricomponent