Exportando datos desde Angular 🚇 sin bibliotecas de terceros

Te voy a explicar cómo exportar datos desde tu aplicación Angular sin usar bibliotecas de terceros.

Cuando tengo que realizar una tarea compleja que me tomaría mucho esfuerzo y tiempo y existe una biblioteca de un tercero que lo soluciona no tengo drama en usarla.

No obstante, si la tarea la puedo programar yo, lo hago, ya que a veces las bibliotecas de terceros quedan obsoletas o sin mantenimiento.

También me he encontrado en que para hacer alguna tarea, algunas bibliotecas ocupan demasiado espacio en disco.

Se debe a que hace muchísimas otras tareas que si no necesito me está sobrecargando mi aplicación.

Por ejemplo, existe una biblioteca para saber si un número dado es par o impar y dicha biblioteca ocupa 4 archivos y un total de 6,51 kB.

Te puedes hacer una función de una línea y obtendrás lo mismo.

function is_odd(input:number):boolean{
  return input%2 !== 0;
}

Exportar datos desde Angular de forma nativa no es difícil, te cuento.

¿Cómo convertir un array en CSV con Angular?

Supón que tenemos un array de objetos, donde cada objeto es una fila de datos y donde el primer dato es el nombre del campo a exportar.

Lo que vamos a hacer es crear un array de filas, y la primera fila tendrá el nombre de los campos separados por el carácter ;

Sería algo así:

const fieldNames=Object.keys(data[0]);
const rows:string[]=[];
rows.push(fieldNames.join(';')+'\r');
data.forEach(item=>{
  const row:string[]=[];
  fieldNames.forEach(field=>{
    const fieldValue=item[field];
    if(!fieldValue){
        row.push('');
    }else{
        row.push(fieldValue); 
    } 
  })
  rows.push(row.join(';')+'\r');
})
const rowsToString=rows.join('\n')

Descargando el fichero

A continuación, crearemos un enlace de descarga que permitirá al usuario descargar el archivo CSV generado.

//rowsToString es la constante que creamos en el punto anterior donde estaba el contenido del CSV

const blob = new Blob([rowsToString], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.csv';
a.click();
window.URL.revokeObjectURL(url);
        

El artículo de hoy ha sido cortito 😎

Hasta luego 🖖