javascript - 在 Javascript 中以 CSV 格式下载数据

Question

我有一个对象数组，如下所示。

var csvArray = [
        {
            Symbol: "AAPL",
            Company: "Apple Inc.",
            Price: "132.54"
        },
        {
            Symbol: "INTC",
            Company: "Intel Corporation",
            Price: "33.45"
        },
        {
            Symbol: "GOOG",
            Company: "Google Inc",
            Price: "554.52"
        },
    ];

我关注了this教程并尝试将其下载为 CSV 文件。

我做的完全一样，但我无法下载文件。正在生成 CSV 文件数据，但无法下载。我使用的代码如下。

function convertArrayOfObjectsToCSV(args) {
  var result, ctr, keys, columnDelimiter, lineDelimiter, data;

  data = args.data || null;
  if (data == null || !data.length) {
      return null;
  }

  columnDelimiter = args.columnDelimiter || ',';
  lineDelimiter = args.lineDelimiter || '\n';

  keys = Object.keys(data[0]);

  result = '';
  result += keys.join(columnDelimiter);
  result += lineDelimiter;

  data.forEach(function(item) {
      ctr = 0;
      keys.forEach(function(key) {
          if (ctr > 0) result += columnDelimiter;

          result += item[key];
          ctr++;
      });
      result += lineDelimiter;
  });
  // alert(result);
  return result;
}

function downloadCSV(args) {
  var data, filename, link;

  var csv = convertArrayOfObjectsToCSV({
      data: csvArray
  });

  // alert(csv);

  if (csv == null) return;

  filename = args.filename || 'export.csv';

  if (!csv.match(/^data:text\/csv/i)) {
      csv = 'data:text/csv;charset=utf-8,' + csv;
  }
  // alert(filename);
  data = encodeURI(csv);
  alert(data);


  link = document.createElement('a');
  link.setAttribute('href', data);
  // link.setAttribute('href', encodeURI(data));
  link.setAttribute('download', filename);
  link.click();
}

encodeURI之后的data变量最终有如下结果

这段代码有什么问题？为什么下载文件失败？

如何修复它以便我可以将数据下载为 CSV 文件？

Answer 1

我以前遇到过这个问题，我找到的解决方案是使用 Blobs 下载 CSV。本质上，您将 csv 数据转换为 Blob，然后使用 URL API 创建要在链接中使用的 URL，例如:

let csvData = str;
let a: any = document.createElement('a');
a.setAttribute('style', 'display:none;');
document.body.appendChild(a);
let blob = new Blob([csvData], { type: 'text/csv' });
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'visitors.csv';
a.click();