table数据导出csv文件

需求又来了

要把数据导出csv文件下载到本地

思路：

• 拿到需要导出的数据，是个数组
• 数组转化成csv文件中的格式，这里要注意值里面的逗号处理
• 用html自己的下载方法进行下载

数据转化

不管原来的数据是什么样子的，根据自己本身的数据格式转化成字符串，每行一个，我最后转化成的数据是这样的

mockCsvData = `Name,Type,Value
  nameA, typeA, 80
  nameB, typeB, 30
  nameC, typeC, 20`;

这里要注意换行，因为最后csv解析的时候，是根据换行来的， 如果反引号后面还有个换行，那最后生成的csv文件最上面一行就是空的

我原来的数据是这样的

originalData = [
    {name: 'nameA',type: 'typeA', value: 80},
    {name: 'nameB',type: 'typeB', value: 30},
    {name: 'nameC',type: 'nameC', value: 20},
  ]

转化函数

convertToCSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','
            line += array[i][index];
        }
        str += line + '\r\n';
    }
    return str;
}

  formatToCsvData() {
    let itemsFormatted = [];
    this.originalData.forEach((item) => {
      itemsFormatted.push({
          name: item.name.replace(/,/g, ''), // remove commas
          type: item.type,
          value: item.value,
      });
    });
    const jsonObject = JSON.stringify(itemsFormatted);
    const csv = this.convertToCSV(jsonObject);
    this.csvData =  this.mockHeaders + csv;
  }

后面加上header

下载

数据转化好了之后拿上数据就可以开始下载了，用的是浏览器的下载，

实现:

download() {
    this.formatToCsvData()
    const exportedFilenmae = this.fileTitle + '.csv';

    const blob = new Blob([this.mockCsvData], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) {
      // IE 10+
      navigator.msSaveBlob(blob, exportedFilenmae);
    } else {
      const link = document.createElement('a');
      if (link.download !== undefined) {
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', exportedFilenmae);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  }

就好啦， 所有代码