ANGULAR 5: cómo exportar datos a un archivo csv

Presta atención porque en este post vas a hallar el hallazgo que buscas.

Solución:

Actualización: aquí hay una forma ligeramente mejor de hacerlo:

1. Abra el símbolo del sistema en el directorio de su proyecto.
2. Instale el protector de archivos escribiendo npm install --save file-saver
3. import saveAs from 'file-saver/FileSaver'; en su archivo .ts.
4. Aquí está el código actualizado basado en la nueva importación.

---

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('rn');

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

Créditos a esta respuesta por convertir un objeto a CSV.

Aquí está el método a utilizar:

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('rn');

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

Agregaré más adelante si encuentro una mejor manera de hacerlo.

Mi solución actualmente es crear un servicio para ahorrar (obtuve esto de Changhui Xu @ codeburst). No se necesitan instalaciones de paquetes para esto…

import  Injectable  from '@angular/core';

@Injectable(
    providedIn: 'root',
)
export class CsvDataService 
    exportToCsv(filename: string, rows: object[])  !rows.length) 
        return;
      
      const separator = ',';
      const keys = Object.keys(rows[0]);
      const csvContent =
        keys.join(separator) +
        'n' +
        rows.map(row => 
          return keys.map(k => 
            let cell = row[k] === null ).join(separator);
        ).join('n');

      const blob = new Blob([csvContent],  type: 'text/csv;charset=utf-8;' );
      if (navigator.msSaveBlob)  // IE 10+
        navigator.msSaveBlob(blob, filename);
       else 
        const link = document.createElement('a');
        if (link.download !== undefined) 
          // Browsers that support HTML5 download attribute
          const url = URL.createObjectURL(blob);
          link.setAttribute('href', url);
          link.setAttribute('download', filename);
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        
      
    
  

Y luego inyecto este servicio en mi componente. Luego llama a este servicio:

  constructor(private csvService :CsvDataService) 

  saveAsCSV() 
    if(this.reportLines.filteredData.length > 0)
      const items: CsvData[] = [];

      this.reportLines.filteredData.forEach(line => 
        let reportDate = new Date(report.date);
        let csvLine: CsvData = 
          date: `$reportDate.getDate()/$reportDate.getMonth()+1/$reportDate.getFullYear()`,
          laborerName: line.laborerName,
          machineNumber: line.machineNumber,
          machineName: line.machineName,
          workingHours: line.hours,
          description: line.description
        
        items.push(csvLine); 
      );

      this.csvService.exportToCsv('myCsvDocumentName.csv', items);
    

  

Ten en cuenta mostrar este post si te fue de ayuda.

---

---

Utiliza Nuestro Buscador