Sé que hay muchas preguntas de esta naturaleza pero necesito hacer esto usando JavaScript. Estoy usando Dojo 1.8
y tengo toda la información de los atributos en un array, que se ve así:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
¿Alguna idea de cómo puedo exportar esto a CSV
en el lado del cliente?
Puedes hacer esto en JavaScript nativo. Tendrá que parsear sus datos en el formato CSV correcto (asumiendo que está usando un array de arrays 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 de la forma más corta (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");
A continuación, puede utilizar las funciones window.open
y encodeURI
de JavaScript para descargar el archivo CSV de esta manera:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Si quieres darle un nombre específico a tu archivo, tienes que hacer las cosas de forma un poco diferente, ya que esto no está soportado al acceder a un URI de datos usando el método window.open
. Para conseguirlo, puedes crear un nodo DOM oculto <a>
y establecer su atributo download
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".
Vine aquí buscando un poco más de cumplimiento del RFC 4180 y no encontré una implementación, así que hice una (posiblemente ineficiente) para mis propias necesidades. Pensé en compartirla 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');
Espero que esto ayude a alguien en el futuro. Esto combina tanto la codificación del CSV junto con la capacidad de descargar el archivo. En mi ejemplo en [jsfiddle](
). Puedes descargar el archivo (asumiendo un navegador HTML 5) o ver la salida en la consola.Actualizar:Actualizar:
Parece que ahora Chrome ha perdido la capacidad de nombrar el archivo. No estoy seguro de lo que ha pasado o de cómo solucionarlo, pero siempre que uso este código (incluyendo el jsfiddle), el archivo descargado se llama ahora download.csv
.
La solución de @Default funciona perfectamente en Chrome (¡muchas gracias por ello!) pero he tenido un problema con IE.
Aquí's 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")