web-dev-qa-db-fra.com

ANGULAR 5: comment exporter des données dans un fichier csv

Je suis débutant en angular et je travaille sur Angular 5, Node v8.11.3.

Je veux réaliser une fonction générique qui prend en charge les données de paramètres et les en-têtes. Et comme sortie un fichier csv.

Je crée un composant appelé "FactureComponent". Ensuite, je génère un service appelé "DataService", puis une fonction getFactures qui extrait une liste de mes éléments à partir d'une maquette et qui fonctionne très bien.

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");
}
}

vous trouverez ci-dessous la vue

<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>

Donc, je veux réaliser une fonction qui convertit mes données affichées sur la vue en un fichier csv.

angularcsvexport-to-csv
8
CHARAFI Saad

Mise à jour: Voici un moyen légèrement meilleur de le faire:

  1. Ouvrez la commande Invite dans le répertoire de votre projet.
  2. Installez l'économiseur de fichier en tapant npm install --save file-saver
  3. import { saveAs } from 'file-saver/FileSaver'; dans votre fichier .ts.
  4. Voici le code mis à jour basé sur la nouvelle importation.
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");
}

Crédits à ceci réponse pour convertir un objet en CSV.

Voici la méthode à utiliser:

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();
}

J'ajouterai plus tard si je trouvais un meilleur moyen de le faire.

29
Braden Brown