Puedes 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 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");
Luego puede usar JavaScript window.open
y encodeURI
funciones para descargar el archivo CSV de la siguiente manera:
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 esto no es compatible con el acceso a un URI de datos utilizando el
window.open
método. Para lograr esto, puede crear un
<a>
nodo DOM oculto 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".
window.open
. Sin embargo, puede crear un enlace oculto que tenga undownload
atributo establecido para el nombre de archivo que desee. Luego, "haciendo clic" en este enlace descargará el archivo en el nombre que desee, lo agregaré a mi respuesta.document.body.appendChild(link);
para obtener soporte completo en FF.data = [["Hello, world"]]
. Eso generará dos columnas cuando debería generar una.encodeURIComponent()
función o algo así? Estoy usando Chrome como navegador.Basado en las respuestas anteriores, creé esta función que probé en IE 11, Chrome 36 y Firefox 29
Por ejemplo: https://jsfiddle.net/jossef/m3rrLzk0/
fuente
window.open
unaelse
delink.download !== undefined
.link.style.visibility='hidden'
. B / c el atributo DOM es de solo lectura. Se pueden encontrar más detalles en updates.html5rocks.com/2015/04/… en la sección "Escribir en propiedades de solo lectura en modo estricto arrojará un error"Esta solución debería funcionar con Internet Explorer 10+, Edge, versiones antiguas y nuevas de Chrome, FireFox, Safari, ++
La respuesta aceptada no funcionará con IE y Safari.
La ejecución del fragmento de código descargará los datos simulados como csv
Créditos a dandavis https://stackoverflow.com/a/16377813/1350598
fuente
setTimeout
.iframe
sección se puede reemplazar solo por location.href = ...URL.createObjectURL
(termina conURL
noUrl
).Vine aquí buscando un poco más de cumplimiento de RFC 4180 y no pude encontrar una implementación, así que hice una (posiblemente ineficiente) para mis propias necesidades. Pensé en compartirlo con todos.
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 (asumiendo el 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 el jsfiddle), el archivo descargado ahora se llama
download.csv
.fuente
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):
fuente
En la actualización de Chrome 35, se modificó el comportamiento del atributo de descarga.
https://code.google.com/p/chromium/issues/detail?id=373182
para trabajar esto en Chrome, use esto
fuente
Trabajando para todos los idiomas
fuente
Ahí tienes:
fuente
La gente está tratando de crear su propia cadena csv, que falla en casos extremos, por ejemplo, caracteres especiales y demás, seguramente este es un problema resuelto ¿verdad?
papaparse : se usa para la codificación JSON a CSV.
Papa.unparse()
.Ejemplo de uso
https://github.com/mholt/PapaParse/issues/175 - Vea este comentario para la discusión de soporte del navegador.
fuente
Puede usar el siguiente código para exportar la matriz al archivo CSV usando Javascript.
Esto también maneja la parte de caracteres especiales
Aquí está el enlace para trabajar jsfiddle
fuente
fuente
Cree un blob con los datos csv .ie
var blob = new Blob([data], type:"text/csv");
Si el navegador admite el almacenamiento de blobs
if window.navigator.mSaveOrOpenBlob)===true
, es decir , guarde los datos csv usando:window.navigator.msSaveBlob(blob, 'filename.csv')
Si el navegador no admite guardar y abrir blobs, guarde los datos csv como:
Fragmento de código completo:
fuente
Hay dos preguntas aquí:
Todas las respuestas a la primera pregunta (excepto la de Milimetric) aquí parecen una exageración. Y el de Milimetric no cubre los requisitos alternativos, como las cadenas circundantes con comillas o la conversión de matrices de objetos.
Aquí están mis opiniones sobre esto:
Para un csv simple, un mapa () y un join () son suficientes:
Este método también le permite especificar un separador de columna que no sea una coma en la unión interna. por ejemplo una pestaña:
d.join('\t')
Por otro lado, si desea hacerlo correctamente y encerrar cadenas entre comillas "", puede usar algo de magia JSON:
si tiene una variedad de objetos como:
fuente
.replace
debería especificar entre corchetes y corchetes..replace
se realiza en una cadena devuelta por lavalues()
cual toma un objeto y devuelve una matriz de valoresvalues()
método no se encontró cuando probé su código.values()
explícitamenteObject
. Corrija el ejemplo.Una gran cantidad de soluciones roll-your-own aquí para convertir datos a CSV, pero casi todas ellas tendrán varias advertencias en términos del tipo de datos que formatearán correctamente sin tropezar con Excel o similares.
¿Por qué no usar algo probado: Papa Parse?
Luego simplemente combine esto con una de las soluciones de descarga locales aquí, por ejemplo. el de @ArneHB se ve bien.
fuente
Una función de flecha con ES6:
Entonces :
En caso de que alguien necesite esto para reaccionar,
react-csv
hay para esofuente
react-csv
biblioteca funciona a las mil maravillas. Gran solución para cualquiera que use módulos.Así es como descargo archivos CSV en el lado del cliente en mi aplicación Java GWT. Un agradecimiento especial a Xavier John por su solución. Se ha verificado que funciona en FF 24.6.0, IE 11.0.20 y Chrome 45.0.2454.99 (64 bits). Espero que esto le ahorre a alguien un poco de tiempo:
fuente
La siguiente es una solución nativa de js.
fuente
Aquí hay una versión amigable angular:
fuente
Las respuestas anteriores funcionan, pero tenga en cuenta que si está abriendo en el formato .xls, las columnas ~~ podrían ~~ estar separadas por, en
'\t'
lugar de','
, la respuesta https://stackoverflow.com/a/14966131/6169225 funcionó bien para mí, siempre que lo use.join('\t')
en las matrices en lugar de.join(',')
.fuente
Yo uso esta función para convertir un
string[][]
archivo a un archivo csv. Cita una celda, si contiene un"
, un,
u otro espacio en blanco (excepto espacios en blanco):Nota : no funciona en Internet Explorer <11 a menos que
map
se llene de polietileno.Nota : Si las celdas contienen números, puede agregar
cell=''+cell
antesif (cell.replace...
para convertir números en cadenas.O puede escribirlo en una línea usando ES6:
fuente
Recomendaría usar una biblioteca como PapaParse: https://github.com/mholt/PapaParse
La respuesta aceptada actualmente tiene múltiples problemas que incluyen:
fuente
Simplemente intente esto, algunas de las respuestas aquí no están manejando datos Unicode y datos que tienen una coma, por ejemplo, la fecha.
fuente
Descargar archivo CSV
fuente
En caso de que alguien necesite esto para knockout js, funciona bien básicamente con la solución propuesta:
html:
ver modelo:
fuente
Agregué a la función Xavier Johns para incluir también los encabezados de campo si es necesario, aunque usa jQuery. Será necesario cambiar el bit $ .each para un bucle de JavaScript nativo
fuente
Esta es una respuesta modificada basada en la respuesta aceptada en la que los datos procederían de JSON.
fuente
Si está buscando una solución realmente rápida, también puede darle una oportunidad a esta pequeña biblioteca que creará y descargará el archivo CSV para usted: https://github.com/mbrn/filefy
El uso es muy simple:
fuente