在Javascript中以CSV格式下载数据

时间:2018-06-29 04:55:25

标签: javascript csv

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

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

data之后的encodeURI变量最终得到以下结果

此代码有什么问题?为什么下载文件失败?

如何解决该问题,以便我可以将数据下载为CSV文件?

1 个答案:

答案 0 :(得分:2)

我以前遇到过此问题,发现的解决方案是使用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();