Array in JavaScript in CSV exportieren

In diesem Tutorial wird gezeigt, wie Sie JavaScript-Array-Informationen in eine CSV-Datei auf der Clientseite exportieren.

Um die Array-Informationen in eine CSV-Datei zu konvertieren, müssen wir die JavaScript-Daten korrekt in das CSV-Format parsen. Wir müssen es als Objekt speichern, das die Codierung und das CSV-Datenformat verarbeiten kann.

In unserem Beispiel verwenden wir ein Array von Arrays, um die Daten zu speichern.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];

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

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

Wir speichern Inhalte aus dem Array data im Objekt csvContent. Wir erstellen Zeilen jedes Arrays und speichern es in einem separaten Objekt.

Alternativ können wir den folgenden Code verwenden, um das gleiche Ergebnis mit Pfeilfunktionen kürzer zu erreichen.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
let csvContent =
    'data:text/csv;charset=utf-8,' + data.map(e => e.join(',')).join('\n');

Die Funktion map() ruft für jedes Element im Array eine Funktion auf und erstellt ein neues Array. Die Methode join() fügt die Komponenten aus dem bestehenden Array mit Hilfe eines Trennzeichens zu einem String zusammen. In unserem Fall verwenden wir ein Komma als Trennzeichen.

Um das oben erstellte CSV-Objekt herunterzuladen und zu codieren, verwenden wir den folgenden Code.

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

Nun exportieren wir dieses csvContent-Objekt in eine externe Datei. Der EncodeURI wird verwendet, um den URI zu kodieren. Diese Funktion kodiert Sonderzeichen außer (, / ? : @ & = + $) und gibt einen String-Wert zurück, der den kodierten URI darstellt.

Um der CSV-Datei einen bestimmten Namen zu geben, müssen wir einen versteckten DOM-Knoten erstellen und die Download-Funktion einstellen.

Dies geschieht unten.

var encodedUri = encodeURI(csvContent);
var link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'my_data.csv');
document.body.appendChild(link);
link.click();

Die Methode setAttribute() fügt dem angegebenen Element einen bestimmten Attributwert hinzu. Im obigen Code wird link.click() zum Download verwendet, um den in der Funktion link.setAttribute() angegebenen Dateinamen direkt herunterzuladen.

Wenn wir unsere Daten in doppelte Anführungszeichen einfügen möchten, können wir beim Erstellen des CSV-Datenobjekts die Funktion JSON.stringify() verwenden.

Siehe den Code unten.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
var csv = data.map(function(d) {
                return JSON.stringify(d);
              })
              .join('\n')
              .replace(/(^\[)|(\]$)/mg, '');
console.log(csv);

Ausgabe:

"rahul" "delhi" "accounts"
"rajev" "UP"  "sales dept"