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

Sie können dies in reinem JavaScript tun. Sie müssen Ihre Daten in das richtige CSV-Format parsen, wie folgt (unter der Annahme, dass Sie ein Array von Arrays für Ihre Daten verwenden, wie Sie es in der Frage beschrieben haben):

const rows = [
    ["name1", "city1", "weitere Infos"],
    ["name2", "city2", "mehr Infos"]
];

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

rows.forEach(function(rowArray) {
    let row = rowArray.join(",");
    csvContent += row + "\r\n";
});

oder auf dem kürzeren Weg (unter Verwendung von Pfeilfunktionen):

const rows = [
    ["name1", "city1", "weitere Infos"],
    ["name2", "city2", "mehr Infos"]
];

let csvContent = "data:text/csv;charset=utf-8," 
    + rows.map(e => e.join(",")).join("\n");

Dann können Sie die JavaScript-Funktionen window.open und encodeURI verwenden, um die CSV-Datei wie folgt herunterzuladen:

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);

Bearbeiten:

Wenn Sie Ihrer Datei einen bestimmten Namen geben möchten, müssen Sie dies etwas anders tun, da dies nicht unterstützt wird, wenn Sie auf eine Daten-URI mit der Methode window.open zugreifen. Um dies zu erreichen, können Sie ein verstecktes DOM-Element erstellen und sein download-Attribut wie folgt setzen:

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

link.click(); // Dadurch wird die Datendatei mit dem Namen "meine_daten.csv" heruntergeladen.

Answer 2

Basierend auf den obigen Antworten habe ich diese Funktion erstellt, die ich auf IE 11, Chrome 36 und Firefox 29 getestet habe.

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
            // Browser, die das HTML5-Download-Attribut unterstützen
            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);
        }
    }
}

Zum Beispiel: https://jsfiddle.net/jossef/m3rrLzk0/

Answer 3

Eine minimalistische, aber dennoch funktionsfähige Lösung :)

/** Wandeln Sie ein 2D-Array in einen CSV-String um
 */
function arrayToCsv(data){
  return data.map(row =>
    row
    .map(String)  // konvertieren Sie jeden Wert in einen String um
    .map(v => v.replaceAll('"', '""'))  // doppelte Anführungszeichen escapen
    .map(v => `"${v}"`)  // zitieren
    .join(',')  // kommasepariert
  ).join('\r\n');  // Zeilen beginnen auf neuen Zeilen
}

Beispiel:

let csv = arrayToCsv([
  [1, '2', '"3"'],
  [true, null, undefined],
]);

Ergebnis:

"1","2","""3"""
"true","null","undefined"

---

Jetzt als Datei herunterladen:

/** Inhalte als Datei herunterladen
 * Quelle: https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
 */
function downloadBlob(content, filename, contentType) {
  // Erstelle einen blob
  var blob = new Blob([content], { type: contentType });
  var url = URL.createObjectURL(blob);

  // Erstelle einen Link zum Herunterladen
  var pom = document.createElement('a');
  pom.href = url;
  pom.setAttribute('download', filename);
  pom.click();
}

Herunterladen:

downloadBlob(csv, 'export.csv', 'text/csv;charset=utf-8;')

Answer 4

Diese Lösung sollte mit Internet Explorer 10+, Edge, alten und neuen Versionen von Chrome, FireFox, Safari, ++ funktionieren

Die akzeptierte Antwort wird nicht mit IE und Safari funktionieren.

// Im Beispieltext der Frage gegebene Daten
var data = [
  ['name1', 'city1', 'weitere Informationen'],
  ['name2', 'city2', 'weitere Informationen']
];

// Aufbau des CSV aus dem zweidimensionalen Array Data
// Jede Spalte wird durch ";" getrennt und neue Zeile "\n" für die nächste Zeile
var csvContent = '';
data.forEach(function(infoArray, index) {
  dataString = infoArray.join(';');
  csvContent += index < data.length ? dataString + '\n' : dataString;
});

// Die Download-Funktion nimmt einen CSV-String, den Dateinamen und den MIME-Typ als Parameter
// Scrollen/Schauen Sie am Ende dieses Snippets, um zu sehen, wie Download aufgerufen wird
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); // nur dieser MIME-Typ wird unterstützt
  }
}

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

Das Ausführen des Code-Snippets lädt die Musterdaten als csv-Datei herunter

Credits an dandavis https://stackoverflow.com/a/16377813/1350598

Answer 5

Im Chrome 35-Update wurde das Verhalten des Download-Attributs geändert.

https://code.google.com/p/chromium/issues/detail?id=373182

Um dies in Chrome zu verwenden, nutzen Sie dies:

var pom = document.createElement('a');
var csvContent=csv; //hier laden wir unsere CSV-Daten
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();