Wenn wir auf einem NodeJS-Server wären, könnten wir einen Header schreiben, einen MIME-Typ festlegen und ihn senden:
res.header("Content-Disposition", "attachment;filename="+name+".csv");
res.type("text/csv");
res.send(200, csvString);
Aufgrund der Header erstellt der Browser einen Download für die genannte CSV-Datei.
Wenn nützliche Daten in einem Browser generiert werden, besteht eine Lösung, um sie in eine CSV-Datei aufzunehmen, darin, Ajax zu verwenden, sie auf den Server hochzuladen (möglicherweise optional dort zu speichern) und den Server zu veranlassen, sie mit diesen Headern zurückzusenden, um a zu werden CSV-Download wieder im Browser.
Ich möchte jedoch eine 100% ige Browserlösung, die kein Ping-Pong mit dem Server beinhaltet.
So kam mir der Gedanke, dass man ein neues Fenster öffnen und versuchen könnte, den Header mit einem META-Tag-Äquivalent zu setzen.
In den letzten Chrome-Versionen funktioniert dies jedoch nicht.
Ich bekomme ein neues Fenster, das den csvString enthält, aber nicht als Download fungiert.
Ich denke, ich habe erwartet, dass ich entweder einen Download in einem unteren Tab oder ein leeres neues Fenster mit einem Download in einem unteren Tab bekomme.
Ich frage mich, ob die Meta-Tags korrekt sind oder ob auch andere Tags benötigt werden.
Gibt es eine Möglichkeit, dies zum Laufen zu bringen, ohne es auf den Server zu übertragen?
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);
Antworten:
Es gibt immer das HTML5-
download
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,' + encodeURIComponent(csvString); a.target = '_blank'; a.download = 'myFile.csv'; document.body.appendChild(a); a.click();
GEIGE
In Chrome und Firefox getestet, funktioniert in den neuesten Versionen (Stand Juli 2013) einwandfrei .
Funktioniert auch in Opera, legt jedoch den Dateinamen nicht fest (Stand Juli 2013) .
Scheint in IE9 nicht zu funktionieren (große Überraschung) (Stand Juli 2013) .
Eine Übersicht darüber, welche Browser das Download-Attribut unterstützen, finden Sie hier.
Bei nicht unterstützten Browsern müssen die entsprechenden Header auf der Serverseite festgelegt werden.
Anscheinend gibt es einen Hack für IE10 und IE11 , der das
download
Attribut nicht unterstützt (Edge jedoch) .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"); if (window.navigator.msSaveOrOpenBlob) { var blob = new Blob([csvString]); window.navigator.msSaveOrOpenBlob(blob, 'myFile.csv'); } else { var a = document.createElement('a'); a.href = 'data:attachment/csv,' + encodeURIComponent(csvString); a.target = '_blank'; a.download = 'myFile.csv'; document.body.appendChild(a); a.click(); }
quelle
attachment;filename=somefile.csv
aber das scheint nicht für CSV-Strings zu funktionieren?@adeneo Antwort funktioniert für Firefox und Chrome ... Für IE kann das Folgende verwendet werden.
if (window.navigator.msSaveOrOpenBlob) { var blob = new Blob([decodeURIComponent(encodeURI(result.data))], { type: "text/csv;charset=utf-8;" }); navigator.msSaveBlob(blob, 'FileName.csv'); }
quelle
Siehe Adeneos Antwort, aber vergiss nicht
encodeURIComponent
!a.href = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString);
Außerdem musste ich "\ r \ n" und nicht nur "\ n" für das Zeilentrennzeichen ausführen.
var csvString = csvRows.join("\r\n");
Überarbeitete Geige: http://jsfiddle.net/7Q3c6/
quelle
Nachdem ich JS-Code in eine winzige Bibliothek gepackt hatte:
https://github.com/AlexLibs/client-side-csv-generator
Der Code, die Dokumentation und die Demo / der Spielplatz werden auf Github bereitgestellt.
Genießen :)
Pull-Anfragen sind willkommen.
quelle
Siehe die Antwort von Adeneo, aber damit dies in Excel in allen Ländern funktioniert, sollten Sie der ersten Zeile der Datei "SEP =" hinzufügen. Dadurch wird das Standardtrennzeichen in Excel festgelegt und nicht im eigentlichen Dokument angezeigt
var csvString = "SEP=, \n" + csvRows.join("\r\n");
quelle
Wir können die Excel-Datei einfach mit jedem Trennzeichen (in dieser Antwort verwende ich das Komma-Trennzeichen) mithilfe von Javascript erstellen und exportieren / herunterladen. Ich verwende kein externes Paket zum Erstellen der Excel-Datei.
var Head = [[ 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4' ]]; var row = [ {key1:1,key2:2, key3:3, key4:4}, {key1:2,key2:5, key3:6, key4:7}, {key1:3,key2:2, key3:3, key4:4}, {key1:4,key2:2, key3:3, key4:4}, {key1:5,key2:2, key3:3, key4:4} ]; for (var item = 0; item < row.length; ++item) { Head.push([ row[item].key1, row[item].key2, row[item].key3, row[item].key4 ]); } var csvRows = []; for (var cell = 0; cell < Head.length; ++cell) { csvRows.push(Head[cell].join(',')); } var csvString = csvRows.join("\n"); let csvFile = new Blob([csvString], { type: "text/csv" }); let downloadLink = document.createElement("a"); downloadLink.download = 'MYCSVFILE.csv'; downloadLink.href = window.URL.createObjectURL(csvFile); downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click();
quelle