Angular 4：将 JSON 导出为 CSV

Question

我需要一些帮助才能在 Angular 4 中将 JSON 导出为 CSV。

有没有现成的外部插件可以满足我的要求。

我找到了一个插件json2csv。但我不知道如何在 Angular 4 中使用它。

Answer 1

您可以使用 angular 2 版本的库。相同的链接是：https://github.com/aqeel-legalinc/angular2-json2csv

基本用法：

Data 是必须转换为 CSV 的 JSON 对象。 Filename 是输出文件的名称。包括的步骤是：

安装库

npm install angular2-json2csv --save

在组件中导入包

import {CsvService} from 'angular2-json2csv'

在组件的构造函数中添加服务

constructor(private csvService: CsvService) {
  }

调用服务

this.csvService.download(this.Data, 'Filename');

Answer 2

npm install --save angular2-csv

对于 Angular [2,4,5] 安装旧版本：

npm install --save angular2-csv@0.2.5

在component.ts中

import { Angular2Csv } from 'angular2-csv/Angular2-csv';

var data = [
  {
    name: "Test 1",
    age: 13,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
];

new Angular2Csv(data, 'My Report');

要设置标题试试 =>

var head = ['name', 'age', 'average', 'etc']; 
new Angular2Csv(data, 'My Report', { headers: (head) });

Source

Answer 3

npm install  "angular2-csv": "^0.2.5",

从 'angular2-csv' 导入 { Angular2Csv };

const sample_CSV_data = {
        "column1": "Column 1",  
        "type": "Type",
        "Board": "Board",
        "column4": "Column 4"        
}; 
const options = {
      fieldSeparator: ',',
      quoteStrings: '"',
      decimalseparator: '.',
      showLabels: true
    };
    const csv = new Angular2Csv(sample_CSV_data, 'Sample_filename', options);

这很好用，非常有用的工具。