javascript - data - vue export csv




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

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 la matriz, 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?


Una función de flecha con ES6:

const dataToCsvURI = (data) => encodeURI(
`data:text/csv;charset=utf-8,${data.map((row, index) =>  row.join(',')).join(`\n`)}`
);

Entonces :

window.open(
  dataToCsvURI(
   [["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
  )
);

En caso de que alguien necesite esto para reactjs , react-csv está ahí para eso.


Agregué a la función Xavier Johns para incluir también los encabezados de campo si es necesario, aunque usa jQuery. El bit $ .each tendrá que cambiarse para un bucle javascript nativo

function exportToCsv(filename, rows, headers = false) {
    var processRow = function (row) {
        row = $.map(row, function(value, index) {
            return [value];
        });
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            if(i == 0 && j == 0 && headers == true){
                var ii = 0;
                $.each(rows[i], function( index, value ) {
                    //console.log(index);
                    var fieldName = index === null ? '' : index.toString();
                    //console.log(fieldName);
                    var fieldResult = fieldName.replace(/"/g, '""');
                    //console.log(fieldResult);
                    if (fieldResult.search(/("|,|\n)/g) >= 0){
                        fieldResult = '"' + fieldResult + '"';
                    }
                    //console.log(fieldResult);
                    if (ii > 0){
                        finalVal += ',';
                        finalVal += fieldResult;
                    }else{
                        finalVal += fieldResult;
                    }
                    ii++;
                    //console.log(finalVal);
                });
                finalVal += '\n';
                //console.log('end: '+finalVal);
            }
            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;
            }else{
                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);
        }
    }
}

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 un poco de tiempo a alguien:

public class ExportFile 
{

    private static final String CRLF = "\r\n";

    public static void exportAsCsv(String filename, List<List<String>> data) 
    {
        StringBuilder sb = new StringBuilder();
        for(List<String> row : data) 
        {
            for(int i=0; i<row.size(); i++)
            {
                if(i>0) sb.append(",");
                sb.append(row.get(i));
            }
            sb.append(CRLF);
        }

        generateCsv(filename, sb.toString());
    }

    private static native void generateCsv(String filename, String text)
    /*-{
        var blob = new Blob([text], { 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);
            }
        }
    }-*/;
}

Basándome en las respuestas anteriores, creé esta función que he probado 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/


En caso de que alguien necesite esto para knockout js, funciona bien con básicamente la solución propuesta:

html:

<a data-bind="attr: {download: filename, href: csvContent}">Download</a>

ver modelo:

// for the download link
this.filename = ko.computed(function () {
    return ko.unwrap(this.id) + '.csv';
}, this);
this.csvContent = ko.computed(function () {
    if (!this.csvLink) {
        var data = ko.unwrap(this.data),
            ret = 'data:text/csv;charset=utf-8,';

        ret += data.map(function (row) {
            return row.join(',');
        }).join('\n');

        return encodeURI(ret);
    }
}, this);

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 cromo, usa este

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

Esta solución debería funcionar con Internet Explorer 10+, Edge, versiones anteriores 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 = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
  }
}

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

Al ejecutar el fragmento de código se descargarán los datos simulados como csv

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


Hay dos preguntas aquí:

  1. Cómo convertir una matriz a la cadena csv
  2. Cómo guardar esa cadena en un archivo

Todas las respuestas a la primera pregunta (excepto la de Milimetric) aquí parecen una exageración. Y el de Milimetric no cubre los requisitos altrenativos, como rodear cadenas con comillas o convertir matrices de objetos.

Aquí están mis opiniones sobre esto:

Para un simple csv, un mapa () y una combinación () son suficientes:

    var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];
    var csv = test_array.map(function(d){
        return d.join();
    }).join('\n');

    /* Results in 
    name1,2,3
    name2,4,5
    name3,6,7
    name4,8,9
    name5,10,11

Este método también le permite especificar un separador de columna distinto de una coma en la combinación interna. por ejemplo una pestaña: d.join('\t')

Por otro lado, si quieres hacerlo correctamente y encerrar cadenas entre comillas ", entonces puedes usar un poco de magia JSON:

var csv = test_array.map(function(d){
       return JSON.stringify(d);
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, ''); // remove opening [ and closing ]
                                   // brackets from each line 

/* would produce
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11

Si tienes una matriz de objetos como:

var data = [
  {"title": "Book title 1", "author": "Name1 Surname1"},
  {"title": "Book title 2", "author": "Name2 Surname2"},
  {"title": "Book title 3", "author": "Name3 Surname3"},
  {"title": "Book title 4", "author": "Name4 Surname4"}
];

// use
var csv = data.map(function(d){
        return JSON.stringify(Object.values(d));
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, '');

La solución de @Default funciona a la perfección 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")

Las respuestas anteriores funcionan, pero tenga en cuenta que si se abre en formato .xls, las columnas ~~ podrían estar separadas por '\t' lugar de ',' , la respuesta https://.com/a/14966131/6169225 funcionó bien para mí, siempre y cuando usé .join('\t') en los arreglos en lugar de .join(',') .


Puedes hacer esto en JavaScript nativo. Tendrá que analizar sus datos en el formato CSV correcto como tal (asumiendo 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";
}); 

Luego, puede usar las funciones window.open y encodeURI JavaScript 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, tiene que hacer las cosas de manera un poco diferente, ya que esto no es compatible con el acceso a un URI de datos utilizando el método window.open . Para lograr esto, puede crear un nodo <a> DOM oculto y configurar su atributo de download 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".

Recomendaría usar una biblioteca como PapaParse: https://github.com/mholt/PapaParse

La respuesta aceptada actualmente tiene varios problemas, incluyendo:

  • falla si los datos contienen una coma
  • falla si los datos contienen un salto de línea
  • (tipo de) falla si los datos contienen una comilla

Utilizo esta función para convertir una string[][] en un archivo csv. Cita una celda, si contiene un " , a , u otro espacio en blanco (excepto espacios en blanco):

/**
 * Takes an array of arrays and returns a `,` sparated csv file.
 * @param {string[][]} table
 * @returns {string}
 */
function toCSV(table) {
    return table
        .map(function(row) {
            return row
                .map(function(cell) {
                    // We remove blanks and check if the column contains
                    // other whitespace,`,` or `"`.
                    // In that case, we need to quote the column.
                    if (cell.replace(/ /g, '').match(/[\s,"]/)) {
                        return '"' + cell.replace(/"/g, '""') + '"';
                    }
                    return cell;
                })
                .join(',');
        })
        .join('\n'); // or '\r\n' for windows

}

Nota : no funciona en Internet Explorer <11 a menos que el map esté rellenado.

Nota : Si las celdas contienen números, puede agregar cell=''+cell antes if (cell.replace... para convertir los números en cadenas.

O puede escribirlo en una línea usando ES6:

t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')

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é en compartirlo 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 tanto 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ó ni de cómo solucionarlo, pero siempre que uso este código (incluido el archivo jsfiddle), el archivo descargado ahora se llama download.csv .


//It work in Chrome and IE ... I reviewed and readed a lot of answer. then i used it and tested in both ... 

var link = document.createElement("a");

if (link.download !== undefined) { // feature detection
    // Browsers that support HTML5 download attribute
    var blob = new Blob([CSV], { type: 'text/csv;charset=utf-8;' });
    var url = URL.createObjectURL(blob);            
    link.setAttribute("href", url);
    link.setAttribute("download", fileName);
    link.style = "visibility:hidden";
}

if (navigator.msSaveBlob) { // IE 10+
   link.addEventListener("click", function (event) {
     var blob = new Blob([CSV], {
       "type": "text/csv;charset=utf-8;"
     });
   navigator.msSaveBlob(blob, fileName);
  }, false);
}

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

//Regards




client-side