如何在 Angular 2 中实现 json2csv答案

【问题标题】：How to implement json2csv in Angular 2如何在 Angular 2 中实现 json2csv
【发布时间】：2017-06-25 10:58:00
【问题描述】：

如何使用 typescript 在 angular 2 中实现 json2csv？(https://www.npmjs.com/package/json2csv)。有没有其他更好的方法。

【问题讨论】：

【解决方案1】：

@dave-notage 响应适用于 Chrome，但不适用于 Firefox。

这是一个有效的实现：

<a [download]="csvFileName" [href]="getCSVDownloadLink()">CSV export</a>

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import * as json2csv from 'json2csv';

@Component({
  selector: 'csv-download',
  templateUrl: './csv-download.component.html',
  styleUrls: ['./csv-download.component.scss']
})
export class CsvDownloadComponent {

  public csvFileName = `test.csv`;

  private SOME_DATA: any[] = [{id: 1, name: 'Peter'}, {id: 2, name: 'Sarah'}];

  constructor(
    private domSanitizer: DomSanitizer,
  ) { }

  getCSVDownloadLink() {

    return this.generateCSVDownloadLink({
      filename: this.csvFileName,
      data: this.SOME_DATA,
      columns: [
        'id',
        'name',
      ],
    });
  }
  // you can move this method to a service
  public generateCSVDownloadLink(options: { filename: string, data: any[], columns: string[] }): SafeUrl {
    const fields = options.columns;
    const opts = { fields, output: options.filename };
    const csv = json2csv.parse(options.data, opts);

    return this.domSanitizer.bypassSecurityTrustUrl('data:text/csv,' + encodeURIComponent(csv));
  }


}

【讨论】：

【解决方案2】：

这可能不是根据原文（我没查过），但是：

https://www.npmjs.com/package/angular2-json2csv

自述文件说它应该用作服务，但它也可以用作普通类，例如：

let csv = new CSVService();

它也有它的缺点：

如果您有一个相似的对象数组，但并非所有对象的每个属性都有一个值，则这些属性的列标题将丢失。

它不允许您排除可能需要也可能不需要的列。

编辑：

我想出了一个替代方案，它考虑的项目比其他项目具有更多的属性。随意使用或修改：

export class JSONToCSV {

  private AddValue(Row: string, Value: string) {
    let Comma: string = ',';
    if (Row === '')
      Comma = '';
    return Row + Comma + Value;
  }

  private GetHeader(Item: any) {
    let Row: string = '';
    for (var Key in Item) {
      Row = this.AddValue(Row, Key);
    }
    return Row + '\r\n';
  }

  private GetRow(Item: any) {
    let Row: string = '';
    for (var Key in Item) {
      Row = this.AddValue(Row, Item[Key]);
    }
    return Row + '\r\n';
  }

  private GetPropCount(Item: any) {
    return Object.keys(Item).length;
  }

  public Convert(Data: any, Filename: string) {
    let CSV: string = '';
    let ColumnsObject: any = null;
    for (var Item of Data) {
      if ((ColumnsObject == null) || (this.GetPropCount(Item) > this.GetPropCount(ColumnsObject))) {
        ColumnsObject = Item;
      }
      CSV = CSV + this.GetRow(Item);
    }
    CSV = this.GetHeader(ColumnsObject) + CSV;
    let CSVBlob = new Blob([CSV], { type: 'text/csv' });
    if (window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(CSVBlob, Filename);
    } else {
      // window.open(URL.createObjectURL(CSVBlob));
      let url= window.URL.createObjectURL(CSVBlob);
      let Anchor: any = document.createElement('a');
      Anchor.setAttribute('style', 'display:none;');
      document.body.appendChild(Anchor);
      Anchor.href = url;
      Anchor.download = Filename;
      Anchor.click();
    }
  }
}

【讨论】：