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

Wenn Sie nach einer wirklich schnellen Lösung suchen, können Sie auch dieser kleinen Bibliothek eine Chance geben, die eine CSV-Datei für Sie erstellen und herunterladen wird: https://github.com/mbrn/filefy

Die Verwendung ist sehr einfach:

import { CsvBuilder } from 'filefy';

var csvBuilder = new CsvBuilder("user_list.csv")
  .setColumns(["name", "surname"])
  .addRow(["Eve", "Holt"])
  .addRows([
    ["Charles", "Morris"],
    ["Tracey", "Ramos"]
  ])
  .exportFile();

Answer 2

Hier ist ein sehr gutes Video darüber, wie es gemacht wird: https://www.youtube.com/watch?v=JPxzeG4N5nQ

Es ist 13 Minuten lang und dieser Typ ist 'auf den Punkt'... d.h. kein typischer Youtuber

Grundsätzlich möchten Sie CSV im folgenden Format haben: Überschrift1, Überschrift2, Überschrift3 \n Wert1, Wert2, Wert3 \n Wert1a, Wert2a, Wert3a \n usw.

Also geht das ganze Tutorial darum, dies zu erreichen.

dann erstellen Sie einfach einen Fake Anchor-Tag, auf den Sie automatisch klicken, und löschen dann den Anchor-Tag.

Schauen Sie sich einfach das Tutorial an, alles wird darin erklärt.

Answer 3

Dies ist eine modifizierte Antwort basierend auf der akzeptierten Antwort, bei der die Daten aus JSON stammen würden.

            JSON-Datenoutput:
             0 :{emails: "BEISPIEL Co., peter@samplecompany.com"}, 1:{emails: "Eine ANDERE Firma, ronald@another.com"}

            JS:
            $.getJSON('Ihr_Link_hier_einfügen', { falls_Sie_Parameter_haben}, function(data) {
            var csvContent = "data:text/csv;charset=utf-8,";
            var dataString = '';
             $.each(data, function(k, v) {
                dataString += v.emails + "\n";
             });

            csvContent += dataString;

            var encodedUri = encodeURI(csvContent);
            var link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "Ihr_Dateiname.csv");
            document.body.appendChild(link); // Erforderlich für FF

            link.click();
        });

Answer 4

Ich habe Xavier Johns Funktion hinzugefügt, um bei Bedarf auch die Feldköpfe einzuschließen, verwendet jQuery aber. Der Teil $.each muss für eine native JavaScript-Schleife geändert werden

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

Answer 5

Wenn jemand dies für knockout js benötigt, funktioniert es gut mit der vorgeschlagenen Lösung:

html:

Download

view model:

// für den 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);