Heim > Web-Frontend > js-Tutorial > Wie exportiere ich ein JavaScript-Array clientseitig in eine CSV-Datei?

Wie exportiere ich ein JavaScript-Array clientseitig in eine CSV-Datei?

Linda Hamilton
Freigeben: 2024-12-12 20:31:11
Original
224 Leute haben es durchsucht

How to Export a JavaScript Array to a CSV File Client-Side?

JavaScript-Array-Daten in CSV auf der Clientseite exportieren

Frage:

Wie kann Ich exportiere eine Reihe von Daten im JavaScript-Format in eine CSV-Datei auf dem Client Seite?

Antwort:

Mit nativem JavaScript können Sie Ihre Daten in das richtige CSV-Format umwandeln, indem Sie Zeilen verbinden und durch Kommas trennen. Hier ist eine Schritt-für-Schritt-Erklärung:

1. Erstellen Sie den CSV-Inhalt:

// Assuming an array of arrays
const rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

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

// Loop through rows and join them with commas
rows.forEach((rowArray) => {
    let row = rowArray.join(",");
    csvContent += row + "\r\n";
});
Nach dem Login kopieren

2. Laden Sie die CSV-Datei herunter:

// Encode the CSV content
var encodedUri = encodeURI(csvContent);

// Open the downloaded window with the encoded URI
window.open(encodedUri);
Nach dem Login kopieren

3. Dateinamen angeben (optional):

Wenn Sie einen bestimmten Dateinamen angeben möchten, müssen Sie einen anderen Ansatz verwenden:

// Create a hidden <a> DOM node
var link = document.createElement("a");

// Set download attributes
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");

// Append to body (required for Firefox)
document.body.appendChild(link);

// Download the file
link.click();
Nach dem Login kopieren

Dieser modifizierte Ansatz ermöglicht Ihnen Geben Sie in diesem Beispiel den Dateinamen als „my_data.csv“ an.

Das obige ist der detaillierte Inhalt vonWie exportiere ich ein JavaScript-Array clientseitig in eine CSV-Datei?. 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