Maison > interface Web > js tutoriel > Comment puis-je exporter les données d'un tableau JavaScript vers un fichier CSV côté client ?

Comment puis-je exporter les données d'un tableau JavaScript vers un fichier CSV côté client ?

Mary-Kate Olsen
Libérer: 2024-12-22 20:12:12
original
399 Les gens l'ont consulté

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

Exportation de données de tableaux JavaScript vers CSV (côté client)

L'exportation de données de tableaux JavaScript au format CSV peut être une tâche utile pour divers scénarios. Voici une méthode complète pour y parvenir côté client :

Analyser les données au format CSV

Tout d'abord, convertissez votre tableau de tableaux au format CSV correct. Cela implique de joindre chaque ligne de données par des virgules et de séparer les lignes par de nouvelles lignes. Par exemple :

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";
});
Copier après la connexion

ou, à l'aide des fonctions fléchées :

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

Télécharger le fichier CSV

Ensuite, utilisez la fenêtre .open de JavaScript et Fonctions encodeURI pour déclencher un téléchargement de fichier :

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Copier après la connexion

Nom de fichier personnalisé (Facultatif)

Pour spécifier un nom de fichier personnalisé, utilisez cette approche :

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".
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal