Comment exporter les informations du tableau JavaScript vers csv (côté client)?

Question

Je sais qu'il y a beaucoup de questions de cette nature mais je dois le faire en utilisant JavaScript. J'utilise Dojo 1.8 et j'ai toutes les informations d'attribut dans le tableau, qui ressemble à ceci:

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

Une idée de comment je peux exporter cela vers csv du côté client?

Answer 1

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

var data = [["name1", "city1", "some other info"], ["name2", "city2", "more info"]];
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function(infoArray, index){

   dataString = infoArray.join(",");
   csvContent += index < infoArray.length ? dataString+ "\n" : dataString;

}); 

Ensuite, vous pouvez utiliser du JavaScript window.open et encodeURI fonctions de télécharger le fichier CSV comme suit:

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

Edit:

Si vous voulez donner à votre fichier un nom spécifique, vous devez faire les choses un peu différemment puisque ce n'est pas pris en charge accès à des données URI à l'aide de l' window.open méthode. Afin de parvenir à cela, vous pouvez créer un caché <a> des nœuds du DOM et de l'ensemble de ses download attribut comme suit:

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");

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

Note: à compter de cette modification, le soutien pour l' download attribut est limité à google Chrome seulement. Je crois que FF est dans le processus de mise en œuvre, et c'est à dire toujours à la traîne derrière eux deux.

Answer 2

Sur la base des réponses ci-dessus, j'ai créé cette fonction que j'ai testée sur IE 11, Chrome 36 et Firefox 29

 function exportToCsv(filename, rows) {
        var processRow = function (row) {
            var finalVal = '';
            for (var j = 0; j < row.length; j++) {
                var innerValue = row[j] === null ? '' : row[j].toString();
                if (row[j] instanceof Date) {
                    innerValue = row[j].toLocaleString();
                };
                var result = innerValue.replace(/"/g, '""');
                if (result.search(/("|,|\n)/g) >= 0)
                    result = '"' + result + '"';
                if (j > 0)
                    finalVal += ',';
                finalVal += result;
            }
            return finalVal + '\n';
        };

        var csvFile = '';
        for (var i = 0; i < rows.length; i++) {
            csvFile += processRow(rows[i]);
        }

        var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
        if (navigator.msSaveBlob) { // IE 10+
            navigator.msSaveBlob(blob, filename);
        } else {
            var link = document.createElement("a");
            if (link.download !== undefined) { // feature detection
                // Browsers that support HTML5 download attribute
                var url = URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", filename);
                link.style = "visibility:hidden";
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }
 

Answer 3

Dans Chrome 35 Update, le comportement de l'attribut de téléchargement a été modifié.

https://code.google.com/p/chromium/issues/detail?id=373182

pour travailler cela en chrome, utilisez ceci

 var pom = document.createElement('a');
var csvContent=csv; //here we load our csv data 
var blob = new Blob([csvContent],{type: 'text/csv;charset=utf-8;'});
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'foo.csv');
pom.click();
 

Answer 4

Je suis venu ici à la recherche d'un peu plus de la norme RFC 4180 respect et je n'ai pas réussi à trouver une mise en œuvre, alors j'ai fait une (peut-être inefficace) pour mes propres besoins. Je pensais que je voudrais 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 va aider quelqu'un dans le futur. Cette combine à la fois l'encodage au format CSV avec la possibilité de télécharger le fichier. Dans mon exemple sur jsfiddle. Vous pouvez télécharger le fichier (en supposant que le HTML 5 navigateur) ou d'afficher le résultat dans la console.

Mise à JOUR:

Chrome semble aujourd'hui avoir perdu la capacité de nom de fichier. Je ne suis pas sûr de ce qui s'est passé ou comment résoudre le problème, mais chaque fois que j'utilise ce code (y compris le jsfiddle), le fichier téléchargé est maintenant nommé download.csv.

Answer 5

La solution de @Default fonctionne parfaitement sur Chrome (merci beaucoup pour cela!) Mais j'ai eu un problème pour y parvenir sur IE. Mais c'est la solution (travail 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")