JavaScript-Array in CSV

Ich habe diesen Beitrag verfolgt. Wie exportiere ich JavaScript-Array-Informationen in CSV (auf der Clientseite)? um ein verschachteltes js-Array als CSV-Datei zu schreiben.

Das Array sieht so aus:

var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];

Der im Link angegebene Code funktioniert gut, außer dass sich nach der dritten Zeile der CSV-Datei alle restlichen Werte in derselben Zeile befinden, z. B

Name1,2,3
Name2,4,5
Name3,6,7
Name4,8,9Name5,10,11 usw. usw

Kann mir jemand erklären, warum das so ist? Das Gleiche gilt für Chrome oder FF.

Danke

BEARBEITEN

jsfiddle http://jsfiddle.net/iaingallagher/dJKz6/

Iain

Die zitierte Antwort war falsch. Du musstest dich ändern

csvContent += index < infoArray.length ? dataString+ "\n" : dataString;

Zu

csvContent += dataString + "\n";

Warum die zitierte Antwort falsch war (komischerweise wurde sie akzeptiert!): indexder zweite Parameter des forEach Die Rückruffunktion ist der Index im Schleifenarray, und es macht keinen Sinn, ihn mit der Größe von zu vergleichen infoArraydas ein Element des Arrays ist (das zufällig auch ein Array ist).

BEARBEITEN

Es sind mittlerweile sechs Jahre vergangen, seit ich diese Antwort geschrieben habe. Viele Dinge haben sich geändert, auch die Browser. Folgendes war Teil der Antwort:

ANFANG des gealterten Teils

Übrigens ist der zitierte Code nicht optimal. Sie sollten vermeiden, wiederholt an eine Zeichenfolge anzuhängen. Sie sollten stattdessen an ein Array anhängen und am Ende einen array.join(“\n”) ausführen. So was:

var lineArray = [];
data.forEach(function (infoArray, index) {
    var line = infoArray.join(",");
    lineArray.push(index == 0 ? "data:text/csv;charset=utf-8," + line : line);
});
var csvContent = lineArray.join("\n");

ENDE des gealterten Teils

(Beachten Sie, dass sich die CSV-Schreibweise ein wenig von der generischen Zeichenfolgenverkettung unterscheidet, da Sie für jede Zeichenfolge auch das Trennzeichen hinzufügen müssen.)

Wie auch immer, das oben Gesagte scheint nicht nicht mehr wahr, zumindest nicht für Chrome und Firefox (für Safari scheint es jedoch immer noch zu gelten).

Um der Unsicherheit ein Ende zu setzen, habe ich ein geschrieben jsPerf-Test Damit wird getestet, ob es für die durch Kommas getrennte Verkettung von Zeichenfolgen schneller ist, sie auf ein Array zu verschieben und mit dem Array zu verbinden, oder sie zuerst mit dem Komma und dann direkt mit der Ergebniszeichenfolge mithilfe des Operators += zu verketten .

Bitte folgen Sie dem Link und führen Sie den Test durch, damit wir über genügend Daten verfügen, um über Fakten statt Meinungen sprechen zu können.

Allgemeine Form ist:

var ids = []; <= this is your array/collection
var csv = ids.join(",");

Für Ihren Fall müssen Sie sich ein wenig anpassen

Für eine einfache CSV genügen eine Map() und eine Join():

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

Mit dieser Methode können Sie auch ein anderes Spaltentrennzeichen als ein Komma im Inneren angeben join. zum Beispiel eine Registerkarte: d.join('\t')

Auf der anderen Seite, wenn Sie es richtig machen und Zeichenfolgen in Anführungszeichen setzen 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, ''); // 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

wenn Sie ein Array von Objekten haben wie:

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

Ich habe diesen Code zum Erstellen schöner, lesbarer CSV-Dateien erstellt:

var objectToCSVRow = function(dataObject) {
    var dataArray = new Array;
    for (var o in dataObject) {
        var innerValue = dataObject[o]===null?'':dataObject[o].toString();
        var result = innerValue.replace(/"/g, '""');
        result=""" + result + '"';
        dataArray.push(result);
    }
    return dataArray.join(' ') + '\r\n';
}

var exportToCSV = function(arrayOfObjects) {

    if (!arrayOfObjects.length) {
        return;
    }

    var csvContent = "data:text/csv;charset=utf-8,";

    // headers
    csvContent += objectToCSVRow(Object.keys(arrayOfObjects[0]));

    arrayOfObjects.forEach(function(item){
        csvContent += objectToCSVRow(item);
    }); 

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "customers.csv");
    document.body.appendChild(link); // Required for FF
    link.click();
    document.body.removeChild(link); 
}

Da Sie in Ihrem Fall Arrays im Array anstelle von Objekten im Array verwenden, überspringen Sie den Kopfteil, können die Spaltennamen jedoch selbst hinzufügen, indem Sie Folgendes anstelle dieses Teils einfügen:

// headers
csvContent += '"Column name 1" "Column name 2" "Column name 3"\n';

Das Geheimnis besteht darin, dass ein Leerzeichen die Spalten in der CSV-Datei trennt und wir die Spaltenwerte in doppelte Anführungszeichen setzen, um Leerzeichen zu ermöglichen, und alle doppelten Anführungszeichen in den Werten selbst maskieren.

Beachten Sie auch, dass ich Nullwerte durch leere Zeichenfolgen ersetze, da dies meinen Anforderungen entsprach. Sie können dies jedoch ändern und durch alles ersetzen, was Sie möchten.

Wenn Ihre Daten Zeilenumbrüche oder Kommas enthalten, müssen Sie diese zuerst maskieren:

const escape = text =>
    text.replace(/\\/g, "\\\\")
        .replace(/\n/g, "\\n")
        .replace(/,/g, "\\,")

escaped_array = test_array.map(fields => fields.map(escape))

Dann machen Sie einfach:

csv = escaped_array.map(fields => fields.join(","))
                .join("\n")

Wenn Sie es im Browser herunterladbar machen möchten:

dl = "data:text/csv;charset=utf-8," + csv
window.open(encodeURI(dl))

Der folgende Code wurde in ES6 geschrieben und funktioniert in den meisten Browsern problemlos.

var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];

// Construct the comma seperated string
// If a column values contains a comma then surround the column value by double quotes
const csv = test_array.map(row => row.map(item => (typeof item === 'string' && item.indexOf(',') >= 0) ? `"${item}"`: String(item)).join(',')).join('\n');

// Format the CSV string
const data = encodeURI('data:text/csv;charset=utf-8,' + csv);

// Create a virtual Anchor tag
const link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', 'export.csv');

// Append the Anchor tag in the actual web page or application
document.body.appendChild(link);

// Trigger the click event of the Anchor link
link.click();

// Remove the Anchor link form the web page or application
document.body.removeChild(link);

Die gewählte Antwort ist wahrscheinlich richtig, erscheint aber unnötig unklar.

ich fand Shomzs Geige sehr hilfreich, aber auch hier unnötig unklar. (Bearbeiten: Ich sehe jetzt, dass diese Fiddle auf der Fiddle des OP basiert.)

Hier ist meine Version (die ich erstellt habe). Geige für), was meiner Meinung nach klarer ist:

function downloadableCSV(rows) {
  var content = "data:text/csv;charset=utf-8,";

  rows.forEach(function(row, index) {
    content += row.join(",") + "\n";
  });

  return encodeURI(content);
}

var rows = [
  ["name1", 2, 3],
  ["name2", 4, 5],
  ["name3", 6, 7],
  ["name4", 8, 9],
  ["name5", 10, 11]
];

$("#download").click(function() {
  window.open(downloadableCSV(rows));
});