Exporter des données javascript dans un fichier CSV sans interaction du serveur

Question

Si nous étions sur un serveur nodeJS, nous pourrions écrire un en-tête, sélectionnez un type mime, et l'envoyer:

res.header("Content-Disposition", "attachment;filename="+name+".csv"); 
res.type("text/csv");
res.send(200, csvString);

et parce que des en-têtes, le navigateur va créer un téléchargement pour le nom de fichier csv.

Lorsque les données utiles sont générés dans un navigateur, une solution pour obtenir un fichier CSV est d'utiliser ajax, télécharger vers le serveur, (peut-être éventuellement l'enregistrer), et d'obtenir le serveur à renvoyer avec ces en-têtes pour devenir un csv télécharger en arrière dans le navigateur.

Toutefois, je tiens à 100% navigateur solution qui n'implique pas de table de ping-pong avec le serveur.

Donc, il m'est apparu que l'on pouvait ouvrir une nouvelle fenêtre et essayez de définir l'en-tête avec une balise META équivalent.

Mais cela ne fonctionne pas pour moi au cours des dernières Chrome.

Je reçois une nouvelle fenêtre, et il contient les csvString, mais ne pas agir comme un téléchargement.

Je suppose que je m'attendais à obtenir un téléchargement en bas de l'onglet ou un blanc nouvelle fenêtre avec le téléchargement en bas de l'onglet.

Je me demandais si les balises meta sont corrects ou si d'autres balises sont également nécessaires.

Est-il un moyen de faire ce travail sans faire des promenades en barque sur le serveur?

JsFiddle pour la Création d'un CSV dans le Navigateur (pas de travail - sorties de la fenêtre mais pas de téléchargement)

var A = [['n','sqrt(n)']];  // initialize array of rows with header row as 1st item
for(var j=1;j<10;++j){ A.push([j, Math.sqrt(j)]) }
var csvRows = [];
for(var i=0,l=A.length; i<l; ++i){
    csvRows.push(A[i].join(','));   // unquoted CSV row
}
var csvString = csvRows.join("\n");
console.log(csvString);
var csvWin = window.open("","","");
csvWin.document.write('<meta name="content-type" content="text/csv">');
csvWin.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
csvWin.document.write(csvString);

Answer 1

Il y a toujours le HTML5 download d'attribut :

var A = [['n','sqrt(n)']];

for(var j=1; j<10; ++j){ 
    A.push([j, Math.sqrt(j)]);
}

var csvRows = [];

for(var i=0, l=A.length; i<l; ++i){
    csvRows.push(A[i].join(','));
}

var csvString = csvRows.join("%0A");
var a         = document.createElement('a');
a.href        = 'data:attachment/csv,' + csvString;
a.target      = '_blank';
a.download    = 'myFile.csv';

document.body.appendChild(a);
a.click();

VIOLON

Testé sur Chrome et Firefox, fonctionne très bien dans les versions les plus récentes.
Travaille à l'Opéra en tant que bien, mais ne permet pas de définir le nom de fichier.
Ne semble pas fonctionner dans IE9 (grosse surprise).

Un aperçu de ce que les navigateurs prennent en charge le téléchargement de l'attribut peut être trouvé Ici
Pour les non-soutenir les navigateurs, on doit définir les en-têtes appropriés sur le server-side.

Answer 2

Voir le commentaire d'adeneo, mais n'oubliez pas encodeURIComponent!

 a.href     = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString);
 

En outre, je devais faire "\ r \ n" pas seulement "\ n" pour le délimiteur de lignes.

 var csvString = csvRows.join("\r\n");
 

Violon révisé: http://jsfiddle.net/7/7Q3c6/