¿Cómo exportar información de matriz de JavaScript a csv (en el lado del cliente)?

9 minutos de lectura

¿Como exportar informacion de matriz de JavaScript a csv en
Sam007

Sé que hay muchas preguntas de esta naturaleza, pero necesito hacer esto usando JavaScript. estoy usando Dojo 1.8 y tener toda la información de los atributos en una matriz, que se ve así:

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

Cualquier idea de cómo puedo exportar esto a CSV del lado del cliente?

¿Como exportar informacion de matriz de JavaScript a csv en
Por defecto

Puede hacer esto en JavaScript nativo. Tendrá que analizar sus datos en el formato CSV correcto como tal (suponiendo que esté utilizando una matriz de matrices para sus datos como ha descrito en la pregunta):

const rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

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

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

o el camino más corto (usando funciones de flecha):

const rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

let csvContent = "data:text/csv;charset=utf-8," 
    + rows.map(e => e.join(",")).join("\n");

Entonces puedes usar JavaScript window.open y encodeURI funciones para descargar el archivo CSV así:

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

Editar:

Si desea darle a su archivo un nombre específico, debe hacer las cosas de manera un poco diferente, ya que no se admite el acceso a un URI de datos usando el window.open método. Para lograr esto, puede crear un oculto <a> nodo DOM y establecer su download atributo de la siguiente manera:

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF

link.click(); // This will download the data file named "my_data.csv".

  • Por lo que sé, no hay una manera de hacerlo usando window.open. Sin embargo, puede crear un vínculo oculto que tenga un download atributo establecido en el nombre de archivo que desee. Luego, “haciendo clic” en este enlace descargará el archivo con el nombre que desee, lo agregaré a mi respuesta.

    – Por defecto

    19 de febrero de 2013 a las 21:23

  • tuve que agregar document.body.appendChild(link); para obtener soporte completo en FF.

    – Hardbyte

    25 de febrero de 2014 a las 3:18


  • Esta respuesta es incorrecta: fallará para el caso. data = [["Hello, world"]]. Eso generará dos columnas cuando debería generar una.

    – aredridel

    22 de julio de 2015 a las 17:33

  • Esto funciona bien para ~ 7000 filas. Pero comienza a dar este error: NETWORK_INVALID_REQUEST. ¿Alguien más se enfrenta a este problema también? ¿Hay algún límite superior de datos sobre encodeURIComponent() función o algo? Estoy usando Chrome como navegador.

    – Abhidemón

    12 de julio de 2016 a las 10:23


  • @Abhidemon La respuesta es que debe usar un tipo de blob para algo tan grande, entonces funcionará bien, por ejemplo: blob = new Blob ([csvContent], {tipo: “texto/csv”}); href = ventana.URL.createObjectURL(blob); Más detalles: stackoverflow.com/a/19328891/1854079

    – mdubez

    13 de julio de 2017 a las 16:43

1646969529 389 ¿Como exportar informacion de matriz de JavaScript a csv en
Javier Juan

Según las respuestas anteriores, creé esta función que probé en IE 11, Chrome 36 y Firefox 29

function exportToCsv(filename, rows) {
    var processRow = function (row) {
        var finalVal="";
        for (var j = 0; j < row.length; j++) {
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0)
                result=""" + result + '"';
            if (j > 0)
                finalVal += ',';
            finalVal += result;
        }
        return finalVal + '\n';
    };

    var csvFile="";
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var 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);
        }
    }
}

Por ejemplo:
https://jsfiddle.net/jossef/m3rrLzk0/

  • Podría recurrir a window.open en un else de link.download !== undefined.

    – Señor Amarillo

    6 de febrero de 2015 a las 6:27

  • Esta es una buena pieza de código. ¿Hay alguna posibilidad de que esté dispuesto a licenciar esto bajo algo más liberal que el SO predeterminado de CC-BY-SA? Por ejemplo, CC0, MIT, BSD, Apache, X11. . . meta.stackexchange.com/questions/12527/…

    – joseph_morris

    3 de marzo de 2015 a las 19:38

  • He estado usando este método para implementar la exportación de Excel en algunas aplicaciones web. Pero Chrome 43+ ahora ha movido los atributos DOM a la cadena de prototipos. Se lanza una excepción en link.style.visibility='hidden'. B/c el atributo DOM es de solo lectura. Más detalles se pueden encontrar en actualizaciones.html5rocks.com/2015/04/… en la sección “Escribir en propiedades de solo lectura en modo estricto arrojará un error”

    – Blaise

    2 de septiembre de 2015 a las 12:49


  • Esta respuesta es la mejor hasta ahora. Incluye casos con caracteres especiales y paréntesis.

    – Vladímir Kostov

    16 mayo 2019 a las 20:55

  • Utilicé la sección de descargas de esta respuesta y funcionó bien en Chrome, ¡gracias!

    – Lirán H

    29 de junio de 2019 a las 11:31

¿Como exportar informacion de matriz de JavaScript a csv en
Arne H. Bitubekk

Esta solución debería funcionar con Internet Explorer 10+, Borde, versiones antiguas y nuevas de Chrome, Firefox, Safari, ++

La respuesta aceptada no funcionará con IE y Safari.

// Example data given in question text
var data = [
  ['name1', 'city1', 'some other info'],
  ['name2', 'city2', 'more info']
];

// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent="";
data.forEach(function(infoArray, index) {
  dataString = infoArray.join(';');
  csvContent += index < data.length ? dataString + '\n' : dataString;
});

// The download function takes a CSV string, the filename and mimeType as parameters
// Scroll/look down at the bottom of this snippet to see how download is called
var download = function(content, fileName, mimeType) {
  var a = document.createElement('a');
  mimeType = mimeType || 'application/octet-stream';

  if (navigator.msSaveBlob) { // IE10
    navigator.msSaveBlob(new Blob([content], {
      type: mimeType
    }), fileName);
  } else if (URL && 'download' in a) { //html5 A[download]
    a.href = URL.createObjectURL(new Blob([content], {
      type: mimeType
    }));
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    location.href="https://stackoverflow.com/questions/14964035/data:application/octet-stream," + encodeURIComponent(content); // only this mime type is supported
  }
}

download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');

Ejecutar el fragmento de código descargará los datos simulados como csv

Créditos a dandavis https://stackoverflow.com/a/16377813/1350598

  • (Como mínimo, el código HTML5) funciona sin el setTimeout.

    – TestarudoShowaGuy

    27 de septiembre de 2016 a las 2:20

  • @StubbornShowaGuy genial, entonces eliminaré el setTimeout del código de ejemplo 🙂

    – Arne H. Bitubekk

    28/09/2016 a las 11:53

  • Funciona en los últimos Chrome, IE y Firefox. ¡Gracias!

    – Walla

    7 oct 2016 a las 15:33

  • La única solución verdaderamente multinavegador que existe. Tenga en cuenta que funciona en Safari 10.10 y Safari móvil. sin embargo, el iframe la sección puede ser reemplazada simplemente por location.href = …

    – Dan

    06/04/2017 a las 10:45


  • NOTA: Hay un error tipográfico en la función, en realidad es URL.createObjectURL (termina con URL no Url).

    –Nathan Hinchey

    14/04/2017 a las 20:47

1646969529 239 ¿Como exportar informacion de matriz de JavaScript a csv en
Uxonith

Vine aquí buscando un poco más de cumplimiento con RFC 4180 y no pude encontrar una implementación, así que hice una (posiblemente ineficiente) para mis propias necesidades. Pensé que lo compartiría con todos.

var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];

var finalVal="";

for (var i = 0; i < content.length; i++) {
    var value = content[i];

    for (var j = 0; j < value.length; j++) {
        var innerValue =  value[j]===null?'':value[j].toString();
        var result = innerValue.replace(/"/g, '""');
        if (result.search(/("|,|\n)/g) >= 0)
            result=""" + result + '"';
        if (j > 0)
            finalVal += ',';
        finalVal += result;
    }

    finalVal += '\n';
}

console.log(finalVal);

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');

Esperemos que esto ayude a alguien en el futuro. Esto combina la codificación del CSV junto con la capacidad de descargar el archivo. En mi ejemplo en jsfiddle. Puede descargar el archivo (suponiendo un navegador HTML 5) o ver el resultado en la consola.

ACTUALIZAR:

Chrome ahora parece haber perdido la capacidad de nombrar el archivo. No estoy seguro de qué sucedió o cómo solucionarlo, pero cada vez que uso este código (incluido jsfiddle), el archivo descargado ahora se llama download.csv.

En la actualización de Chrome 35, se cambió el comportamiento de los atributos de descarga.

https://code.google.com/p/chromium/issues/detail?id=373182

para trabajar esto en cromo, use esto

var pom = document.createElement('a');
var csvContent=csv; //here we load our csv data 
var blob = new Blob([csvContent],{type: 'text/csv;charset=utf-8;'});
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'foo.csv');
pom.click();

¿Como exportar informacion de matriz de JavaScript a csv en
greg venech

La solución de @Default funciona perfectamente en Chrome (¡muchas gracias por eso!) pero tuve un problema con IE.

Aquí hay una solución (funciona en IE10):

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

1646969530 470 ¿Como exportar informacion de matriz de JavaScript a csv en
kolipto

Una solución minimalista pero con todas las funciones 🙂

/** Convert a 2D array into a CSV string
 */
function arrayToCsv(data){
  return data.map(row =>
    row
    .map(String)  // convert every value to String
    .map(v => v.replaceAll('"', '""'))  // escape double colons
    .map(v => `"${v}"`)  // quote it
    .join(',')  // comma-separated
  ).join('\r\n');  // rows starting on new lines
}

Ejemplo:

let csv = arrayToCsv([
  [1, '2', '"3"'],
  [true, null, undefined],
]);

Resultado:

"1","2","""3"""
"true","null","undefined"

Ahora descárguelo como un archivo:


/** Download contents as a file
 * Source: https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
 */
function downloadBlob(content, filename, contentType) {
  // Create a blob
  var blob = new Blob([content], { type: contentType });
  var url = URL.createObjectURL(blob);

  // Create a link to download it
  var pom = document.createElement('a');
  pom.href = url;
  pom.setAttribute('download', filename);
  pom.click();
}

Descargalo:

downloadBlob(csv, 'export.csv', 'text/csv;charset=utf-8;')

Guardar cuadro de diálogo

archivo resultante

  • Esto es tarde pero realmente la mejor respuesta aquí.

    – Garr Godofredo

    29 de noviembre de 2021 a las 21:39

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad