Comment exporter les informations d'un tableau JavaScript vers un fichier csv (côté client) ?

Je sais qu'il y a beaucoup de questions de cette nature mais j'ai besoin de faire cela en utilisant JavaScript. J'utilise Dojo 1.8 et j'ai toutes les informations sur les attributs dans un tableau, qui ressemble à ceci :

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

Avez-vous une idée de la façon dont je peux exporter ces informations au format CSV du côté client ?

Springer F
Question modifiée 2 septembre 2019 в 5:51
Programmation
csv client-side export javascript dojo-1.8
19 février 2013 в 4:49
12 vues
Solution

Vous pouvez le faire en JavaScript natif. Vous devrez analyser vos données au format CSV correct (en supposant que vous utilisez un tableau de tableaux pour vos données, comme vous l'avez décrit dans la question) :

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";
});

ou la méthode la plus courte (en utilisant les [fonctions flèches][1]) :

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

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

Vous pouvez ensuite utiliser les fonctions JavaScript window.open et encodeURI pour télécharger le fichier CSV comme suit :

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

Edit:

Si vous voulez donner un nom spécifique à votre fichier, vous devez procéder un peu différemment car cela n'est pas pris en charge pour accéder à une URI de données à l'aide de la méthode `window.open`. Pour ce faire, vous pouvez créer un noeud DOM caché `` et définir son attribut `download` comme suit : 
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".

[1] : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

isherwood
Réponse modifiée 29 avril 2019 в 4:20
Commentaires (34)

Je suis venu ici pour chercher un peu plus de conformité à la RFC 4180 et je n'ai pas trouvé d'implémentation, alors j'en ai fait une (peut-être inefficace) pour mes propres besoins. J'ai pensé que je pourrais la partager avec tout le monde.

var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];

var finalVal = '';

for (var i = 0; i < content.length; i++) {
    var value = content[i];

    for (var j = 0; j < value.length; j++) {
        var innerValue =  value[j]===null?'':value[j].toString();
        var result = innerValue.replace(/"/g, '""');
        if (result.search(/("|,|\n)/g) >= 0)
            result = '"' + result + '"';
        if (j > 0)
            finalVal += ',';
        finalVal += result;
    }

    finalVal += '\n';
}

console.log(finalVal);

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');

J'espère que cela pourra aider quelqu'un à l'avenir. Cela combine à la fois l'encodage du CSV et la possibilité de télécharger le fichier. Dans mon exemple sur [jsfiddle](http://jsfiddle.net/a5E9m/2/). Vous pouvez télécharger le fichier (en supposant un navigateur HTML 5) ou afficher la sortie dans la console.

UPDATE:

Chrome semble maintenant avoir perdu la possibilité de nommer le fichier. Je ne suis pas sûr de ce qui s'est passé ou de la façon de le réparer, mais chaque fois que j'utilise ce code (y compris le jsfiddle), le fichier téléchargé est maintenant nommé download.csv.

Uxonith
Réponse modifiée 28 mai 2014 в 4:39
Commentaires (3)

La solution de @Default fonctionne parfaitement sur Chrome (merci beaucoup pour cela !) mais j'ai eu un problème avec IE.

Voici une solution (qui fonctionne sur IE10) :

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")
Skip Jack
Réponse modifiée 26 mai 2016 в 3:18
Commentaires (0)