make - Exportar datos de JavaScript a un archivo CSV sin interacción del servidor

leer archivo csv javascript

Question

Si estuviéramos en un servidor nodeJS, podríamos escribir un encabezado, establecer un tipo de mime y enviarlo:

res.header("Content-Disposition", "attachment;filename="+name+".csv");
res.type("text/csv");
res.send(200, csvString);

y debido a los encabezados, el navegador creará una descarga para el archivo csv nombrado.

Cuando se generan datos útiles en un navegador, una solución para obtenerlo en un archivo CSV es usar ajax, subirlo al servidor (quizás guardarlo allí de forma opcional) y hacer que el servidor lo envíe de vuelta con estos encabezados para convertirse en un descarga de csv en el navegador.

Sin embargo, me gustaría una solución de navegador 100% que no involucre ping-pong con el servidor.

Entonces se me ocurrió que uno podría abrir una nueva ventana y tratar de establecer el encabezado con una etiqueta META equivalente.

Pero esto no funciona para mí en Chrome reciente.

Obtengo una nueva ventana, y contiene el csvString, pero no funciona como una descarga.

Supongo que esperaba obtener una descarga en la pestaña inferior o una nueva ventana en blanco con una descarga en la pestaña inferior.

Me pregunto si las metaetiquetas son correctas o si también se necesitan otras etiquetas.

¿Hay alguna manera de hacer que esto funcione sin enviarlo al servidor?

JsFiddle para crear un archivo CSV en el navegador (no funciona - ventana de resultados pero no descarga)

var A = [[''n'',''sqrt(n)'']]; // initialize array of rows with header row as 1st item
for(var j=1;j<10;++j){ A.push([j, Math.sqrt(j)]) }
var csvRows = [];
for(var i=0,l=A.length; i<l; ++i){
csvRows.push(A[i].join('','')); // unquoted CSV row
}
var csvString = csvRows.join("/n");
console.log(csvString);
var csvWin = window.open("","","");
csvWin.document.write(''<meta name="content-type" content="text/csv">'');
csvWin.document.write(''<meta name="content-disposition" content="attachment; filename=data.csv"> '');
csvWin.document.write(csvString);

Answer 1

@adeneo answer funciona para Firefox y Chrome ... Para IE, se puede utilizar lo siguiente.

if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([decodeURIComponent(encodeURI(result.data))], {
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, ''FileName.csv'');
}

Answer 2

Siempre existe el atributo de download HTML5:

Este atributo, si está presente, indica que el autor pretende que el hipervínculo se use para descargar un recurso de modo que cuando el usuario haga clic en el enlace se le pregunte si desea guardarlo como un archivo local.

Si el atributo tiene un valor, el valor se utilizará como el nombre del archivo rellenado previamente en el aviso Guardar que se abre cuando el usuario hace clic en el enlace.

var A = [[''n'',''sqrt(n)'']];
for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}
var csvRows = [];
for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join('',''));
}
var csvString = csvRows.join("%0A");
var a = document.createElement(''a'');
a.href = ''data:attachment/csv,'' + encodeURIComponent(csvString);
a.target = ''_blank'';
a.download = ''myFile.csv'';
document.body.appendChild(a);
a.click();

FIDDLE

Probado en Chrome y Firefox, funciona bien en las versiones más recientes (a partir de julio de 2013) .
También funciona en Opera, pero no establece el nombre de archivo (desde julio de 2013) .
No parece funcionar en IE9 (gran sorpresa) (desde julio de 2013) .

Here se puede encontrar una descripción general de los navegadores compatibles con el atributo de descarga.
Para los navegadores no compatibles, uno tiene que establecer los encabezados apropiados en el lado del servidor.

Aparentemente hay un hack para IE10 e IE11 , que no es compatible con el atributo de download (sin embargo, Edge lo hace) .

var A = [[''n'',''sqrt(n)'']];
for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}
var csvRows = [];
for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join('',''));
}
var csvString = csvRows.join("%0A");
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([csvString]);
window.navigator.msSaveOrOpenBlob(blob, ''myFile.csv'');
} else {
var a = document.createElement(''a'');
a.href = ''data:attachment/csv,'' + encodeURIComponent(csvString);
a.target = ''_blank'';
a.download = ''myFile.csv'';
document.body.appendChild(a);
a.click();
}

Answer 3

Una vez que empaqué el código JS haciendo eso en una pequeña biblioteca:

https://github.com/AlexLibs/client-side-csv-generator

El Código, la Documentación y la Demostración / Zona de juegos se proporcionan en Github.

Disfruta :)

Las solicitudes de extracción son bienvenidas.

Answer 4

Vea la respuesta de adeneo, ¡pero no olvide encodeURIComponent !

a.href = ''data:application/csv;charset=utf-8,'' + encodeURIComponent(csvString);

Además, necesitaba hacer "/ r / n" no solo "/ n" para el delimitador de fila.

var csvString = csvRows.join("/r/n");

Fiddle revisado: http://jsfiddle.net/7Q3c6/