Angular7：将 JSON 数据导出到 CSV

Question

下面是将 JSON 导出到 CSV 的示例：

import { Angular7Csv } from 'angular7-csv/Angular7-csv';

var data = [
 {
   name: "Test 1",
   age: 13,
   average: 8.2,
   approved: true,
   description: [{"Status": "Pass", "TimeStamp": "2019-03-12 08:19:50", "UserID": "KG19932"}]
},
 {
   name: 'Test 2',
   age: 11,
   average: 8.2,
   approved: true,
   description: [{"Status": "Pass", "TimeStamp": "2019-03-12 08:19:50", "UserID": "KG19932"}]

 },
 {
   name: 'Test 4',
   age: 10,
   average: 8.2,
   approved: true,
   description: [{"Status": "Pass", "TimeStamp": "2019-03-12 08:19:50", "UserID": "KG19932"}]
}
];

new Angular7Csv(data, 'My Report');

.csv 文件下载成功，但在 Description 列中的值获取为 [object object]。我试过 JSON.stringify 和 JSON.Parse 但没有成功。有人对此有解决方案吗？？

Answer 1

只需将描述字符串化

     data.forEach(x=>{
          x.description=JSON.stringify(x.description);
        });
     new Angular7Csv(data, 'My Report');

Answer 2

要获得更精确的输出，您也可以使用此代码

您可以使用这个简单的代码从 JSON 导出到 CSV。此代码解决了许多基本问题，例如分隔符问题、自定义标题、跳过空列和添加 - 代替特定列的空数据。请参阅此 github link 以解决 Angular.

中有关 CSV 导出的所有问题

https://github.com/marvin-aroza/Angular-csv-export

将此视为您的 JSON 数据

jsonData : any = [{
    name : 'Berlin',
    age : '45',
    country : 'Spain',
    phone : '896514326'
  },
  {
    name : 'Professor',
    age : '42',
    country : 'spain'
  },
  {
    name : 'Tokyo',
    age : '35',
    phone : '854668244'
  },
  {
    name : 'Helsinki',
    phone : '35863297'
  }];

您可以使用这些功能下载 csv

exportCsv() {
    this.downloadFile(this.jsonData);
  }

  downloadFile(data, filename = 'data') {
    let arrHeader = ["name", "age", "country", "phone"];
    let csvData = this.ConvertToCSV(data, arrHeader);
    console.log(csvData)
    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
    let dwldLink = document.createElement("a");
    let url = URL.createObjectURL(blob);
    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
      dwldLink.setAttribute("target", "_blank");
    }
    dwldLink.setAttribute("href", url);
    dwldLink.setAttribute("download", "sample.csv");
    dwldLink.style.visibility = "hidden";
    document.body.appendChild(dwldLink);
    dwldLink.click();
    document.body.removeChild(dwldLink);
  }

要编辑 CSV 格式，您可以添加此功能

ConvertToCSV(objArray, headerList) {
    console.log(objArray);
    console.log(headerList);
    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    let str = '';
    let row = 'S.No,';

    let newHeaders = ["Name", "Age", "Country", "Phone"];

    for (let index in newHeaders) {
      row += newHeaders[index] + ',';
    }
    row = row.slice(0, -1);
    str += row + '\r\n';
    for (let i = 0; i < array.length; i++) {
      let line = (i + 1) + '';
      for (let index in headerList) {
        let head = headerList[index];

        line += ',' + this.strRep(array[i][head]);
      }
      str += line + '\r\n';
    }
    return str;
  }

对于带有逗号的值，您可以使用此函数删除逗号并将其视为一个值

strRep(data) {
    if(typeof data == "string") {
      let newData = data.replace(/,/g, " ");
       return newData;
    }
    else if(typeof data == "undefined") {
      return "-";
    }
    else if(typeof data == "number") {
      return  data.toString();
    }
    else {
      return data;
    }
  }

Angular7：将 JSON 数据导出到 CSV

Angular7 : Export JSON data to CSV

csv

export-to-csv

angular

angular7