angularcsvexport-to-csv

ANGULAR 5 : how to export data to csv file


I am beginner in angular and I am working on Angular 5, Node v8.11.3.

I want to realize a generic function that takes in parameter data and headers. And as output a csv file.

I create a component called ' FactureComponent ' Then I generate a service called ' DataService ' then I create a getFactures function that retrieves a list of my items from a mock and it works very well.

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

you will find below the view

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

So I want to realize a function that converts my data displayed on the view into a csv file.


Solution

  • Update: Here is slightly better way to do it:

    1. Open up command prompt in the directory of your project.
    2. Install file-saver by typing npm install --save file-saver
    3. import { saveAs } from 'file-saver'; into your .ts file.
    4. Here is the updated code based on the new import.
    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");
    }
    

    Credits to this answer for converting an object to CSV.

    Here is the method to use:

    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]);
      const csv = data.map((row) =>
        header
          .map((fieldName) => JSON.stringify(row[fieldName], replacer))
          .join(',')
      );
      csv.unshift(header.join(','));
      const csvArray = csv.join('\r\n');
    
      const a = document.createElement('a');
      const blob = new Blob([csvArray], { type: 'text/csv' });
      const url = window.URL.createObjectURL(blob);
    
      a.href = url;
      a.download = 'myFile.csv';
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    }
    

    I'll add on later if I found a better way to do it.