Wie exportiert man JavaScript-Array-Informationen in eine CSV-Datei (auf der Client-Seite)?

Question

Ich weiß, dass es viele Fragen dieser Art gibt, aber ich muss dies mit JavaScript machen. Ich benutze Dojo 1.8 und habe alle Attributinformationen in einem Array, das so aussieht:

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

Haben Sie eine Idee, wie ich dies auf der Client-Seite in CSV exportieren kann?

Answer 1

Viele Eigenbau-Lösungen hier für die Konvertierung von Daten in CSV, aber fast alle haben verschiedene Einschränkungen in Bezug auf den Typ der Daten, die sie korrekt formatieren, ohne Excel oder ähnliche Programme durcheinander zu bringen.

Warum nicht etwas Bewährtes verwenden: Papa Parse

Papa.unparse(data[, config])

Dann kombinieren Sie dies einfach mit einer der lokalen Download-Lösungen hier, z.B. die von @ArneHB sieht gut aus.

Answer 2

Es gibt hier zwei Fragen:

1. Wie konvertiert man ein Array in einen CSV-String
2. Wie speichert man diesen String in einer Datei

Alle Antworten auf die erste Frage (außer die von Milimetric) scheinen hier übertrieben zu sein. Und die von Milimetric deckt nicht alternative Anforderungen ab, wie das Umgeben von Zeichenfolgen mit Anführungszeichen oder das Konvertieren von Arrays von Objekten.

Hier sind meine Ansichten dazu:

Für ein einfaches CSV sind map() und join() ausreichend:

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

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

Mit dieser Methode können Sie auch einen Spaltentrenner andere als ein Komma im inneren join angeben. Zum Beispiel ein Tab: d.join('\t')

Andererseits, wenn Sie es ordentlich machen und Zeichenfolgen in Anführungszeichen "" einschließen möchten, dann können Sie etwas JSON-Magie verwenden:

var csv = test_array.map(function(d){
       return JSON.stringify(d);
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, ''); // entferne öffnende [ und schließende ]
                                   // Klammern von jeder Zeile 

/* würde erzeugen
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11

Wenn Sie ein Array von Objekten haben wie :

var data = [
  {"title": "Buchtitel 1", "autor": "Name1 Nachname1"},
  {"title": "Buchtitel 2", "autor": "Name2 Nachname2"},
  {"title": "Buchtitel 3", "autor": "Name3 Nachname3"},
  {"title": "Buchtitel 4", "autor": "Name4 Nachname4"}
];

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

Answer 3

Von react-admin:

function downloadCsv(csv, filename) {
    const fakeLink = document.createElement('a');
    fakeLink.style.display = 'none';
    document.body.appendChild(fakeLink);
    const blob = new Blob([csv], { type: 'text/csv' });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // Verwalte IE11+ & Edge
        window.navigator.msSaveOrOpenBlob(blob, `${filename}.csv`);
    } else {
        fakeLink.setAttribute('href', URL.createObjectURL(blob));
        fakeLink.setAttribute('download', `${filename}.csv`);
        fakeLink.click();
    }
};

downloadCsv('Hello World', 'beliebiger-dateiname.csv');

Answer 4

Erstellen Sie eine Blob mit den CSV-Daten, d.h. var blob = new Blob([data], type:"text/csv");

Wenn der Browser das Speichern von Blobs unterstützt, d.h. if window.navigator.mSaveOrOpenBlob)===true, dann speichern Sie die CSV-Daten mit: window.navigator.msSaveBlob(blob, 'filename.csv')

Wenn der Browser das Speichern und Öffnen von Blobs nicht unterstützt, dann speichern Sie die CSV-Daten als:

var downloadLink = document.createElement('');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);

Vollständiger Code-Schnipsel:

var filename = 'data_'+(new Date()).getTime()+'.csv';
var charset = "utf-8";
var blob = new Blob([data], {
     type: "text/csv;charset="+ charset + ";"
});
if (window.navigator.msSaveOrOpenBlob) {
     window.navigator.msSaveBlob(blob, filename);
} else {
    var downloadLink = document.element('');
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', filename);
    downloadLink.attr('target', '_blank');  
    document.body.append(downloadLink); 
    downloadLink[0].click(); 
}

Answer 5

Einfach mal versuchen, einige der hier gegebenen Antworten behandeln keine Unicode-Daten und Daten, die z.B. ein Komma haben, wie z.B. Datum.

function downloadUnicodeCSV(filename, datasource) {
    var content = '', newLine = '\r\n';
    for (var _i = 0, datasource_1 = datasource; _i < datasource_1.length; _i++) {
        var line = datasource_1[_i];
        var i = 0;
        for (var _a = 0, line_1 = line; _a < line_1.length; _a++) {
            var item = line_1[_a];
            var it = item.replace(/"/g, '""');
            if (it.search(/("|,|\n)/g) >= 0) {
                it = '"' + it + '"';
            }
            content += (i > 0 ? ',' : '') + it;
            ++i;
        }
        content += newLine;
    }
    var link = document.createElement('a');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(content));
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};