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

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?

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

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/

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

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

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

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