Exportar matriz a CSV en JavaScript

Este tutorial demostrará cómo exportar información de array de JavaScript a un archivo CSV en el lado del cliente.

Para convertir la información del array en un archivo CSV, necesitamos analizar correctamente los datos de JavaScript en formato CSV. Necesitamos almacenarlo como un objeto que pueda manejar la codificación y el formato de datos CSV.

En nuestro ejemplo, usamos un array de matrices para almacenar los datos.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];

let csvContent = 'data:text/csv;charset=utf-8,';

data.forEach(function(rowArray) {
  let row = rowArray.join(',');
  csvContent += row + '\r\n';
});

Almacenamos el contenido del array data en el objeto csvContent. Creamos filas de cada matriz y las almacenamos en un objeto separado.

Alternativamente, podemos usar el siguiente código ya que es una forma más corta de lograr el mismo resultado usando funciones de flecha.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
let csvContent =
    'data:text/csv;charset=utf-8,' + data.map(e => e.join(',')).join('\n');

La función map() llama a una función en cada elemento del array y crea una nueva matriz. El método join() unirá los componentes del array existente a una cadena con la ayuda de un separador. En nuestro caso, usamos una coma como separador.

Para descargar y codificar el objeto CSV creado anteriormente, usamos el siguiente código.

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);

Ahora exportaremos este objeto csvContent a un archivo externo. El EncodeURI se utiliza para codificar el URI. Esta función codifica caracteres especiales excepto (, / ? : @ & = + $) Y devuelve un valor de cadena que representa el URI codificado.

Para darle al archivo CSV un nombre particular, necesitamos crear un nodo DOM oculto y configurar la función de descarga.

Esto se hace a continuación.

var encodedUri = encodeURI(csvContent);
var link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'my_data.csv');
document.body.appendChild(link);
link.click();

El método setAttribute() agrega un valor de atributo específico al elemento dado. En el código anterior, link.click() se utiliza para descargar para descargar directamente el nombre de archivo proporcionado en la función link.setAttribute().

Si queremos tener nuestros datos insertados entre comillas dobles, podemos usar la función JSON.stringify() mientras creamos el objeto de datos CSV.

Vea el código a continuación.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
var csv = data.map(function(d) {
                return JSON.stringify(d);
              })
              .join('\n')
              .replace(/(^\[)|(\]$)/mg, '');
console.log(csv);

Producción :

"rahul" "delhi" "accounts"
"rajev" "UP"  "sales dept"