Czy jest jakiś sposób, aby utworzyć plik tekstowy po stronie klienta i poprosić użytkownika o pobranie go bez interakcji z serwerem? Wiem, że nie mogę pisać bezpośrednio na ich komputer (bezpieczeństwo i wszystko), ale czy mogę je utworzyć i poprosić o zapisanie?
javascript
file
web-applications
client-side
Joseph Silber
źródło
źródło
Odpowiedzi:
Możesz użyć URI danych. Obsługa przeglądarki jest różna; patrz Wikipedia . Przykład:
Strumień oktetów wymusza monit o pobranie. W przeciwnym razie prawdopodobnie otworzy się w przeglądarce.
W przypadku CSV możesz użyć:
Wypróbuj wersję demo jsFiddle .
źródło
Proste rozwiązanie dla przeglądarek obsługujących HTML5 ...
Stosowanie
źródło
download
atrybutu można określić nazwę pliku ;-)txt
rozszerzenie tylko wtedy, gdy nie podasz rozszerzenia w nazwie pliku. Jeśli to zrobiszdownload("data.json", data)
, będzie działać zgodnie z oczekiwaniami.Wszystkie powyższe rozwiązania nie działały we wszystkich przeglądarkach. Oto, co w końcu działa w IE 10+, Firefox i Chrome (i bez jQuery lub innej biblioteki):
Pamiętaj, że w zależności od sytuacji możesz również chcieć wywołać URL.revokeObjectURL po usunięciu
elem
. Według dokumentacji dla URL.createObjectURL :źródło
Failed: network error
w Chrome. Ten działa dobrze.Wszystkie powyższe przykłady działają dobrze w Chrome i IE, ale nie działają w Firefoksie. Rozważ dołączenie kotwicy do ciała i usunięcie jej po kliknięciu.
źródło
a.click()
wierszu „Odmowa dostępu”, ponieważ uważa, że adres URL obiektu blob to cross-origin.Z przyjemnością korzystam z FileSaver.js . Jego kompatybilność jest całkiem dobra (IE10 + i wszystko inne) i jest bardzo prosta w użyciu:
źródło
<a>
.Poniższa metoda działa w IE11 +, Firefox 25+ i Chrome 30+:
Zobacz to w akcji: http://jsfiddle.net/Kg7eA/
Firefox i Chrome obsługują URI danych do nawigacji, co pozwala nam tworzyć pliki, przechodząc do identyfikatora URI danych, podczas gdy IE nie obsługuje go ze względów bezpieczeństwa.
Z drugiej strony IE ma interfejs API do zapisywania obiektu blob, którego można używać do tworzenia i pobierania plików.
źródło
To rozwiązanie jest pobierane bezpośrednio z repozytorium github tiddlywiki (tiddlywiki.com). Użyłem tiddlywiki w prawie wszystkich przeglądarkach i działa jak urok:
Repozytorium Github: Pobierz moduł wygaszacza
źródło
Rozwiązanie, które działa na IE10: (Potrzebowałem pliku csv, ale wystarczy zmienić typ i nazwę pliku na txt)
źródło
Jeśli chcesz tylko przekonwertować ciąg, aby był dostępny do pobrania, możesz wypróbować to za pomocą jQuery.
źródło
Pakiet pobierania pliku js ze strony github.com/kennethjiang/js-file-download obsługuje skrzynki na krawędziach do obsługi przeglądarki:
Wyświetl źródło, aby zobaczyć, w jaki sposób wykorzystuje techniki wymienione na tej stronie.
Instalacja
Stosowanie
źródło
Jak wspomniano wcześniej, Fileaver to świetny pakiet do pracy z plikami po stronie klienta. Ale nie radzi sobie dobrze z dużymi plikami. StreamSaver.js to alternatywne rozwiązanie (wskazane w FileServer.js), które może obsługiwać duże pliki:
źródło
źródło
Od kwietnia 2014 interfejsy API FileSytem mogą nie być standaryzowane w W3C. Myślę, że każdy, kto patrzy na rozwiązanie z kroplą, powinien zachować ostrożność.
HTML5 rzuca się w oczy
Lista mailingowa W3C w FileSytem API
źródło
Na podstawie odpowiedzi @Rick, która była bardzo pomocna.
Musisz scape'ować ciąg,
data
jeśli chcesz go udostępnić w ten sposób:`Niestety nie mogę skomentować odpowiedzi @ Ricka z powodu mojej obecnej niskiej reputacji w StackOverflow.
Edit sugestia była wspólna i odrzucone.
źródło
Możemy użyć interfejsu API URL , w szczególności URL.createObjectURL () oraz interfejsu API Blob do kodowania i pobierania praktycznie wszystkiego.
Jeśli pobieranie jest małe, działa to dobrze:
Jeśli pobieranie jest ogromne, zamiast korzystania z DOM, lepszym sposobem jest utworzenie elementu łącza z parametrami pobierania i uruchomienie kliknięcia.
Zwróć uwagę, że element łącza nie jest dołączany do dokumentu, ale i tak kliknięcie działa! W ten sposób można utworzyć pobieranie setek Mo.
Premia! Pobierz dowolne obiekty cykliczne , unikaj błędów:
Korzystanie https://github.com/douglascrockford/JSON-js/blob/master/cycle.js
W tym przykładzie pobranie
document
obiektu jako json.źródło
Możesz nawet zrobić coś lepszego niż tylko identyfikatory URI - w przeglądarce Chrome możesz także zaproponować nazwę pliku, jak wyjaśniono w tym wpisie na blogu na temat nazwania pobierania podczas używania identyfikatorów URI .
źródło
Ta funkcja poniżej działała.
źródło
Następująca metoda działa w IE10 +, Edge, Opera, FF i Chrome:
Więc po prostu wywołaj funkcję:
źródło
Dla mnie działało to idealnie, przy pobieraniu tej samej nazwy pliku i rozszerzenia
<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>
„title” to nazwa pliku z rozszerzeniem np:
sample.pdf
,waterfall.jpg
itp ..„file64” to treść base64 coś takiego, tj.
Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO
źródło
Chciałbym użyć
<a></a>
tagu, a następnie ustawićhref='path'
. Następnie umieść obraz pomiędzy<a>
elementami, aby móc go zobaczyć. Jeśli chcesz, możesz utworzyć funkcję, która to zmieni,href
tak aby nie był to tylko ten sam link, ale był dynamiczny.Daj
<a>
tagowiid
również, jeśli chcesz uzyskać do niego dostęp za pomocą javascript.Począwszy od wersji HTML:
Teraz z JavaScript:
źródło
Jeśli plik zawiera dane tekstowe, stosuję technikę umieszczania tekstu w elemencie textarea i niech użytkownik go wybierze (kliknij obszar tekstowy, a następnie Ctrl-A), a następnie skopiuj, a następnie wklej do edytora tekstu.
źródło