web-dev-qa-db-ja.com

ANGULAR 5：csvファイルにデータをエクスポートする方法

私はangularの初心者で、Angular 5、Node v8.11.3。

パラメーターデータとヘッダーを受け取る汎用関数を実現したいです。そして、出力としてcsvファイル。

「FactureComponent」というコンポーネントを作成し、「DataService」というサービスを生成してから、モックからアイテムのリストを取得するgetFactures関数を作成すると、非常にうまく機能します。

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { FACTURES } from '../mock.factures';

@Component({
selector: 'app-facture',
templateUrl: './facture.component.html',
styleUrls: ['./facture.component.scss']
})
export class FactureComponent implements OnInit {

factures = [];
columns  = ["Id","Reference","Quantite","Prix Unitaire"];
btnText:  String = "Export CSV";

constructor(private _data: DataService) { }

ngOnInit() {
this.getFactures();
}
getFactures(){
this.factures=this._data.getFactures();
}
generateCSV(){
console.log("generate");
}
}

ビューの下にあります

<form>
<input type="submit" [value]="btnText" (click)="generateCSV()"/>
</form>

<table>
 <tr>
   <th *ngFor="let col of columns">
      {{col}}
   </th>
 </tr>
 <tr *ngFor="let facture of factures">
  <td>{{facture.id}}</td>     
  <td>{{facture.ref}}</td>
  <td>{{facture.quantite}}</td>
  <td>{{facture.prixUnitaire}}</td>
 </tr>
</table>

そこで、ビューに表示されるデータをcsvファイルに変換する機能を実現したいと思います。

angularcsvexport-to-csv
8
CHARAFI Saad

更新：これを行うには少し良い方法があります：

  1. プロジェクトのディレクトリでコマンドプロンプトを開きます。
  2. npm install --save file-saverと入力して、ファイルセーバーをインストールします。
  3. import { saveAs } from 'file-saver/FileSaver';を.tsファイルに追加します。
  4. 以下は、新しいインポートに基づいて更新されたコードです。
downloadFile(data: any) {
    const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
    const header = Object.keys(data[0]);
    let csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(header.join(','));
    let csvArray = csv.join('\r\n');

    var blob = new Blob([csvArray], {type: 'text/csv' })
    saveAs(blob, "myFile.csv");
}

これに対するクレジット answer オブジェクトをCSVに変換するため。

使用する方法は次のとおりです。

downloadFile(data: any) {
    const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
    const header = Object.keys(data[0]);
    let csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(header.join(','));
    let csvArray = csv.join('\r\n');

    var a = document.createElement('a');
    var blob = new Blob([csvArray], {type: 'text/csv' }),
    url = window.URL.createObjectURL(blob);

    a.href = url;
    a.download = "myFile.csv";
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

より良い方法が見つかったら、後で追加します。

29
Braden Brown