Heim > Web-Frontend > js-Tutorial > Wie kann ich JavaScript-Array-Daten clientseitig in eine CSV-Datei exportieren?

Wie kann ich JavaScript-Array-Daten clientseitig in eine CSV-Datei exportieren?

Mary-Kate Olsen
Freigeben: 2024-12-22 20:12:12
Original
363 Leute haben es durchsucht

How Can I Export JavaScript Array Data to a CSV File on the Client-Side?

JavaScript-Array-Daten nach CSV exportieren (clientseitig)

Der Export von Daten aus JavaScript-Arrays in das CSV-Format kann für verschiedene Szenarien eine nützliche Aufgabe sein. Hier ist eine umfassende Methode, um dies auf der Clientseite zu erreichen:

Daten in das CSV-Format analysieren

Konvertieren Sie zunächst Ihr Array-Array in das richtige CSV-Format. Dabei werden die einzelnen Datenzeilen durch Kommas verbunden und die Zeilen durch neue Zeilen getrennt. Zum Beispiel:

const rows = [
  ["name1", "city1", "some other info"],
  ["name2", "city2", "more info"]
];

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

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

oder mit Pfeilfunktionen:

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

CSV-Datei herunterladen

Als nächstes verwenden Sie JavaScripts window.open und encodeURI-Funktionen zum Auslösen eines Dateidownloads:

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Nach dem Login kopieren

Benutzerdefinierter Dateiname (Optional)

Um einen benutzerdefinierten Dateinamen anzugeben, verwenden Sie diesen Ansatz:

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

link.click(); // This will download the data file named "my_data.csv".
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich JavaScript-Array-Daten clientseitig in eine CSV-Datei exportieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage