Możesz to zrobić w natywnym JavaScript. Będziesz musiał parsować swoje dane w odpowiednim formacie CSV (zakładając, że używasz tablic tablic dla swoich danych, jak opisano w pytaniu):
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";
});
lub w skrócie (za pomocą funkcji strzałek ):
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");
Następnie możesz użyć JavaScript window.open
i encodeURI
funkcji, aby pobrać plik CSV w następujący sposób:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Edytować:
Jeśli chcesz nadać plikowi konkretną nazwę, musisz zrobić coś nieco inaczej, ponieważ nie jest to obsługiwane przy uzyskiwaniu dostępu do identyfikatora URI danych przy użyciu tej
window.open
metody. Aby to osiągnąć, możesz utworzyć ukryty
<a>
węzeł DOM i ustawić jego
download
atrybut w następujący sposób:
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
. Możesz jednak utworzyć ukryty link, który madownload
ustawiony atrybut żądanej nazwy pliku. Następnie „kliknięcie” tego linku spowoduje pobranie pliku o żądanej nazwie, dodam go do mojej odpowiedzi.document.body.appendChild(link);
aby uzyskać pełne wsparcie w FF.data = [["Hello, world"]]
. To wyświetli dwie kolumny, kiedy powinna wypisać jedną.encodeURIComponent()
funkcji lub czegoś takiego? Używam Chrome jako przeglądarki.Na podstawie powyższych odpowiedzi stworzyłem tę funkcję, którą przetestowałem na IE 11, Chrome 36 i Firefox 29
Na przykład: https://jsfiddle.net/jossef/m3rrLzk0/
źródło
window.open
welse
zlink.download !== undefined
.link.style.visibility='hidden'
. B / c atrybut DOM jest tylko do odczytu. Więcej szczegółów można znaleźć w aktualizacji.html5rocks.com/2015/04/... w sekcji „Zapisywanie właściwości tylko do odczytu w trybie ścisłym spowoduje błąd”To rozwiązanie powinno współpracować z Internet Explorer 10+, Edge, starymi i nowymi wersjami Chrome, FireFox, Safari, ++
Akceptowana odpowiedź nie będzie działać w IE i Safari.
Uruchomienie fragmentu kodu spowoduje pobranie próbnych danych jako csv
Kredyty dla dandavis https://stackoverflow.com/a/16377813/1350598
źródło
setTimeout
.iframe
sekcję można zastąpić samą lokalizacją.URL.createObjectURL
(kończy się naURL
nieUrl
).Przybyłem tutaj, szukając nieco większej zgodności z RFC 4180 i nie udało mi się znaleźć implementacji, więc zrobiłem (być może nieefektywną) wersję na własne potrzeby. Myślałem, że podzielę się tym ze wszystkimi.
Mam nadzieję, że pomoże to komuś w przyszłości. Łączy to zarówno kodowanie CSV, jak i możliwość pobrania pliku. W moim przykładzie na jsfiddle . Możesz pobrać plik (przy założeniu przeglądarki HTML 5) lub wyświetlić dane wyjściowe w konsoli.
AKTUALIZACJA:
Wygląda na to, że Chrome stracił teraz nazwę pliku. Nie jestem pewien, co się stało ani jak to naprawić, ale za każdym razem, gdy używam tego kodu (w tym jsfiddle), pobrany plik ma teraz nazwę
download.csv
.źródło
Rozwiązanie @Default działa idealnie w Chrome (wielkie dzięki za to!), Ale miałem problem z IE.
Oto rozwiązanie (działa na IE10):
źródło
W aktualizacji Chrome 35 zmieniono zachowanie atrybutu pobierania.
https://code.google.com/p/chromium/issues/detail?id=373182
do pracy w chrome, użyj tego
źródło
Działa we wszystkich językach
źródło
Proszę bardzo :
źródło
Ludzie próbują stworzyć własny ciąg csv, który nie działa na krawędziach, np. Znaki specjalne i takie, na pewno jest to rozwiązany problem, prawda?
papaparse - użyj do kodowania JSON na CSV.
Papa.unparse()
.Przykładowe użycie
https://github.com/mholt/PapaParse/issues/175 - Zobacz ten komentarz do dyskusji na temat obsługi przeglądarki.
źródło
Poniższego fragmentu kodu można użyć do wyeksportowania tablicy do pliku CSV przy użyciu Javascript.
Dotyczy to również części znaków specjalnych
Oto link do działającego jsfiddle
źródło
źródło
Utwórz obiekt blob za pomocą pliku CSV .ie
var blob = new Blob([data], type:"text/csv");
Jeśli przeglądarka obsługuje zapisywanie obiektów blob, tzn.
if window.navigator.mSaveOrOpenBlob)===true
Zapisz dane csv, używając:window.navigator.msSaveBlob(blob, 'filename.csv')
Jeśli przeglądarka nie obsługuje zapisywania i otwierania obiektów blob, zapisz dane csv jako:
Pełny fragment kodu:
źródło
Tutaj są dwa pytania:
Wszystkie odpowiedzi na pierwsze pytanie (oprócz tego Milimetric) tutaj wydają się przesadą. A ten przez Milimetric nie obejmuje dodatkowych wymagań, takich jak otaczające ciągi znaków z cudzysłowami lub konwersja tablic obiektów.
Oto moje podejście do tego:
W przypadku zwykłego pliku csv wystarczy jedna mapa () i join ():
Ta metoda pozwala również określić separator kolumn inny niż przecinek w złączeniu wewnętrznym. na przykład zakładka:
d.join('\t')
Z drugiej strony, jeśli chcesz to zrobić poprawnie i zawrzeć ciągi w cudzysłowie „”, możesz użyć magii JSON:
jeśli masz tablicę obiektów takich jak:
źródło
.replace
należy podać nawiasy klamrowe vs. nawiasy kwadratowe..replace
odbywa się na ciągu zwróconym przezvalues()
który pobiera obiekt i zwraca tablicę wartościvalues()
Metoda nie została znaleziona, gdy próbowałem kodu.values()
wyraźnego połączeniaObject
. Poprawiłem przykład.Wiele rozwiązań typu roll-your-own do konwertowania danych do CSV, ale prawie wszystkie będą miały różne zastrzeżenia dotyczące rodzaju danych, które poprawnie sformatują bez potknięcia Excela lub podobnych.
Dlaczego nie skorzystać z czegoś sprawdzonego: Papa Parse
Następnie po prostu połącz to z jednym z lokalnych rozwiązań pobierania np. ten autorstwa @ArneHB wygląda dobrze.
źródło
Funkcja jednej strzałki w ES6:
Następnie :
Na wypadek, gdyby ktoś tego potrzebował Reaguje,
react-csv
Ma za toźródło
react-csv
Biblioteka działa jak czar. Świetne rozwiązanie dla każdego, kto używa modułów.Oto jak pobieram pliki CSV po stronie klienta w mojej aplikacji Java GWT. Specjalne podziękowania dla Xaviera Johna za jego rozwiązanie. Sprawdzono działanie w FF 24.6.0, IE 11.0.20 i Chrome 45.0.2454.99 (64-bit). Mam nadzieję, że zaoszczędzi to komuś trochę czasu:
źródło
Oto wersja przyjazna dla Angulara:
źródło
Powyższe odpowiedzi działają, ale pamiętaj, że jeśli otwierasz w formacie .xls, kolumny ~~ mogą ~~ być oddzielone
'\t'
zamiast','
, odpowiedź https://stackoverflow.com/a/14966131/6169225 działała dobrze dla mnie, o ile użyłem.join('\t')
tablic zamiast.join(',')
.źródło
Używam tej funkcji do konwersji
string[][]
do pliku csv. Cytuje komórkę, jeśli zawiera a"
, a,
lub inną spację (z wyjątkiem pustych miejsc):Uwaga : nie działa w przeglądarce Internet Explorer <11, chyba że
map
jest wypełniony wielopełniaczowo.Uwaga : Jeśli komórki zawierają liczby, możesz dodać
cell=''+cell
wcześniej,if (cell.replace...
aby przekonwertować liczby na ciągi.Lub możesz napisać w jednym wierszu za pomocą ES6:
źródło
Polecam korzystanie z biblioteki takiej jak PapaParse: https://github.com/mholt/PapaParse
Akceptowana odpowiedź ma obecnie wiele problemów, w tym:
źródło
Po prostu spróbuj tego, niektóre odpowiedzi tutaj nie obsługują danych Unicode i danych z przecinkiem, na przykład data.
źródło
Pobierz plik CSV
źródło
Poniżej znajduje się natywne rozwiązanie js.
źródło
Jeśli ktoś potrzebuje tego do knockout js, działa w zasadzie z proponowanym rozwiązaniem:
HTML:
zobacz model:
źródło
Dodałem do funkcji Xaviera Johnsa, aby w razie potrzeby uwzględnić również nagłówki pól, używa jQuery. Bit $ .each będzie wymagał zmiany dla natywnej pętli javascript
źródło
To jest zmodyfikowana odpowiedź oparta na zaakceptowanej odpowiedzi, w której dane będą pochodzić z JSON.
źródło
Jeśli szukasz naprawdę szybkiego rozwiązania, możesz również dać szansę tej małej bibliotece, która utworzy i pobierze dla Ciebie plik CSV: https://github.com/mbrn/filefy
Użycie jest bardzo proste:
źródło