如何使用 Javascript 将数据导出到 CSV？

Question

我设法编写了一个脚本，将 Javascript 中的 GET 请求中的数据导出到 CSV。 但是，我有一个具有更多字段（时间、高度、纬度、o3、co2、ch2o）的unit变量。 如何创建一个 CSV ，其中包含更多列以及从脚本中获取的值？

到目前为止，我已经设法创建了一个带有多个标题的 CSV，但我不知道如何用数据填充 CSV 的行。 我已经设法完全填充了一列。

在下面的 function 中，我使用unit[Object.keys(unit)[4]]仅获取co2数据。 如何将 append 数据添加到每一列？

function download_csv(data, sensor) {
  var csv = 'Day, altitude, latitude, o3, co2, ch2o\n';
  for (var index in data) {
    if (!data.hasOwnProperty(index)) continue;
    var unit = data[index];
    csv += unit[Object.keys(unit)[4]];
    csv += "\n";
  }
  var hiddenElement = document.createElement('a');
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
  hiddenElement.target = '_blank';
  hiddenElement.download = sensor + '.csv';
  hiddenElement.click();
}

数据具有以下格式：

Answer 1

假设data参数包含用于构建 CSV 数据的对象数组，则可以使用Object.keys()和Object.value()动态构建数据。 使用此方法，键名是什么或数据中包含多少个键名都无关紧要。

 function download_csv(data, sensor) { let csvHeader = Object.keys(data[0]).join(',') + '\n'; // header row let csvBody = data.map(row => Object.values(row).join(',')).join('\n'); var hiddenElement = document.createElement('a'); hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvHeader + csvBody); hiddenElement.target = '_blank'; hiddenElement.download = sensor + '.csv'; hiddenElement.click(); } let data = [{ lorem: 'ipsum', foo: 'bar', fizz: 'buzz' }]; download_csv(data, 'foobar');

如果您需要支持旧版浏览器，需要注意的一件事是 IE 不支持Object.values 。 不过，有一个polyfill可用。