Sie können dies in nativem JavaScript tun. Sie müssen Ihre Daten so in das richtige CSV-Format analysieren (vorausgesetzt, Sie verwenden ein Array von Arrays für Ihre Daten, wie Sie in der Frage beschrieben haben):
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";
});
oder der kürzere Weg (mit Pfeilfunktionen ):
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");
Dann können Sie JavaScript window.open
und encodeURI
Funktionen verwenden, um die CSV-Datei wie folgt herunterzuladen:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Bearbeiten:
Wenn Sie Ihrer Datei einen bestimmten Namen geben möchten, müssen Sie etwas anders vorgehen, da dies nicht unterstützt wird, wenn Sie mit der
window.open
Methode auf einen Daten-URI zugreifen . Um dies zu erreichen, können Sie einen versteckten
<a>
DOM-Knoten erstellen und sein
download
Attribut wie folgt festlegen :
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".
window.open
. Sie können jedoch einen versteckten Link erstellen, dessendownload
Attribut auf den gewünschten Dateinamen festgelegt ist. Wenn Sie dann auf diesen Link klicken, wird die Datei in dem von Ihnen gewünschten Namen heruntergeladen. Ich werde sie meiner Antwort hinzufügen.document.body.appendChild(link);
, um volle Unterstützung in FF zu bekommen.data = [["Hello, world"]]
. Dadurch werden zwei Spalten ausgegeben, wenn eine ausgegeben werden soll.encodeURIComponent()
Funktion oder so? Ich benutze Chrome als Browser.Basierend auf den obigen Antworten habe ich diese Funktion erstellt, die ich auf IE 11, Chrome 36 und Firefox 29 getestet habe
Zum Beispiel: https://jsfiddle.net/jossef/m3rrLzk0/
quelle
window.open
einenelse
von zurückgreifenlink.download !== undefined
.link.style.visibility='hidden'
. B / c ist das DOM-Attribut schreibgeschützt. Weitere Details finden Sie unter updates.html5rocks.com/2015/04/… im Abschnitt "Das Schreiben in schreibgeschützte Eigenschaften im strengen Modus führt zu einem Fehler"Diese Lösung sollte mit Internet Explorer 10+, Edge, alten und neuen Versionen von Chrome, FireFox, Safari, ++ funktionieren
Die akzeptierte Antwort funktioniert nicht mit IE und Safari.
Durch Ausführen des Code-Snippets werden die Scheindaten als CSV heruntergeladen
Credits an dandavis https://stackoverflow.com/a/16377813/1350598
quelle
setTimeout
.iframe
Abschnitt kann jedoch nur durch location.href = ...URL.createObjectURL
(endet mitURL
nichtUrl
).Ich bin hierher gekommen, um ein bisschen mehr RFC 4180-Konformität zu suchen, und habe keine Implementierung gefunden. Deshalb habe ich eine (möglicherweise ineffiziente) für meine eigenen Anforderungen erstellt. Ich dachte, ich würde es mit allen teilen.
Hoffentlich hilft dies jemandem in Zukunft. Dies kombiniert sowohl die Codierung der CSV als auch die Möglichkeit, die Datei herunterzuladen. In meinem Beispiel auf jsfiddle . Sie können die Datei herunterladen (vorausgesetzt, der HTML 5-Browser) oder die Ausgabe in der Konsole anzeigen.
AKTUALISIEREN:
Chrome scheint nun die Möglichkeit verloren zu haben, die Datei zu benennen. Ich bin nicht sicher, was passiert ist oder wie ich es beheben kann, aber wann immer ich diesen Code (einschließlich der jsfiddle) verwende, wird die heruntergeladene Datei jetzt benannt
download.csv
.quelle
Die Lösung von @Default funktioniert perfekt in Chrome (vielen Dank dafür!), Aber ich hatte ein Problem mit dem IE.
Hier ist eine Lösung (funktioniert unter IE10):
quelle
Im Chrome 35-Update wurde das Verhalten von Download-Attributen geändert.
https://code.google.com/p/chromium/issues/detail?id=373182
Verwenden Sie dies, um dies in Chrom zu bearbeiten
quelle
Arbeiten für alle Sprachen
quelle
Los geht's:
quelle
Leute versuchen, ihre eigene CSV-Zeichenfolge zu erstellen, die in Randfällen fehlschlägt, z. B. Sonderzeichen und dergleichen. Dies ist sicherlich ein gelöstes Problem, oder?
papaparse - Verwendung für die JSON-zu-CSV-Codierung.
Papa.unparse()
.Anwendungsbeispiel
https://github.com/mholt/PapaParse/issues/175 - In diesem Kommentar finden Sie Informationen zur Browserunterstützung.
quelle
Mit dem folgenden Code können Sie das Array mithilfe von Javascript in eine CSV-Datei exportieren.
Dies behandelt auch Sonderzeichen
Hier ist der Link zur Arbeit mit jsfiddle
quelle
quelle
Erstellen Sie einen Blob mit den CSV-Daten .ie
var blob = new Blob([data], type:"text/csv");
Wenn der Browser das Speichern von Blobs unterstützt
if window.navigator.mSaveOrOpenBlob)===true
, speichern Sie die CSV-Daten mit:window.navigator.msSaveBlob(blob, 'filename.csv')
Wenn der Browser das Speichern und Öffnen von Blobs nicht unterstützt, speichern Sie die CSV-Daten wie folgt:
Vollständiger Code-Ausschnitt:
quelle
Hier gibt es zwei Fragen:
Alle Antworten auf die erste Frage (außer der von Milimetric) scheinen hier ein Overkill zu sein. Und die von Milimetric deckt keine altrenativen Anforderungen ab, wie das Umgeben von Zeichenfolgen mit Anführungszeichen oder das Konvertieren von Arrays von Objekten.
Hier sind meine Ansichten dazu:
Für eine einfache CSV reichen eine Map () und ein Join () aus:
Mit dieser Methode können Sie auch ein anderes Spaltentrennzeichen als ein Komma im inneren Join angeben. Zum Beispiel eine Registerkarte:
d.join('\t')
Auf der anderen Seite können Sie JSON-Magie verwenden, wenn Sie es richtig machen und Zeichenfolgen in Anführungszeichen "" einschließen möchten:
Wenn Sie eine Reihe von Objekten haben wie:
quelle
.replace
sollte das meiner Meinung nach geschweifte oder eckige Klammern angeben..replace
wird für eine Zeichenfolge ausgeführt, die vonvalues()
einem Objekt zurückgegeben wird und ein Array von Werten zurückgibtvalues()
Methode wurde nicht gefunden, als ich Ihren Code ausprobierte.values()
expliziten AufrufObject
. Ich habe das Beispiel korrigiert.Viele Roll-Your-Own-Lösungen für die Konvertierung von Daten in CSV, aber fast alle haben verschiedene Einschränkungen hinsichtlich der Art der Daten, die sie korrekt formatieren, ohne Excel oder ähnliches auszulösen.
Warum nicht etwas Bewährtes verwenden: Papa Parse
Dann kombinieren Sie dies einfach mit einer der lokalen Download-Lösungen hier, z. der von @ArneHB sieht gut aus.
quelle
Eine Pfeilfunktion mit ES6:
Dann :
Für den Fall, dass jemand dies benötigt reagieren,
react-csv
Ist es für diequelle
react-csv
Bibliothek wirkt wie ein Zauber. Tolle Lösung für alle, die Module verwenden.So lade ich CSV-Dateien auf der Clientseite in meiner Java GWT-Anwendung herunter. Besonderer Dank geht an Xavier John für seine Lösung. Es wurde überprüft, dass es in FF 24.6.0, IE 11.0.20 und Chrome 45.0.2454.99 (64-Bit) funktioniert. Ich hoffe das spart jemandem ein bisschen Zeit:
quelle
Das Folgende ist eine native js-Lösung.
quelle
Hier ist eine Angular-freundliche Version:
quelle
Die Antworten über Arbeit, aber denken Sie daran , dass , wenn Sie im XLS - Format, Spalten ~~ Macht eröffnen ~~ von getrennt werden ,
'\t'
anstatt','
die Antwort https://stackoverflow.com/a/14966131/6169225 funktionierte gut für mich, solange ich.join('\t')
auf den Arrays statt verwendet.join(',')
.quelle
Ich benutze diese Funktion, um eine
string[][]
in eine CSV-Datei zu konvertieren . Es zitiert eine Zelle, wenn sie ein"
, ein,
oder ein anderes Leerzeichen enthält (außer Leerzeichen):Hinweis : Funktioniert in Internet Explorer <11 nur, wenn
map
es mehrfach gefüllt ist.Hinweis : Wenn die Zellen Zahlen enthalten, können Sie
cell=''+cell
vorher hinzufügenif (cell.replace...
, um Zahlen in Zeichenfolgen umzuwandeln.Oder Sie können es mit ES6 in einer Zeile schreiben:
quelle
Ich würde empfehlen, eine Bibliothek wie PapaParse zu verwenden: https://github.com/mholt/PapaParse
Die akzeptierte Antwort weist derzeit mehrere Probleme auf, darunter:
quelle
Versuchen Sie es einfach, einige der Antworten hier behandeln keine Unicode-Daten und Daten, die ein Komma haben, zum Beispiel Datum.
quelle
Laden Sie die CSV-Datei herunter
quelle
Falls jemand dies für Knockout js benötigt, funktioniert es im Grunde genommen mit der vorgeschlagenen Lösung:
html:
Modell anzeigen:
quelle
Ich habe die Xavier Johns-Funktion hinzugefügt, um bei Bedarf auch die Feldheader einzuschließen. Ich verwende jedoch jQuery. Das Bit $ .each muss für eine native Javascript-Schleife geändert werden
quelle
Dies ist eine modifizierte Antwort basierend auf der akzeptierten Antwort, bei der die Daten von JSON stammen würden.
quelle
Wenn Sie nach einer wirklich schnellen Lösung suchen, können Sie auch dieser kleinen Bibliothek eine Chance geben, die eine CSV-Datei für Sie erstellt und herunterlädt: https://github.com/mbrn/filefy
Die Verwendung ist sehr einfach:
quelle