Jeśli na przykład skorzystasz z linku:
data:application/octet-stream;base64,SGVsbG8=
Przeglądarka wyświetli monit o pobranie pliku zawierającego dane przechowywane jako base64 w samym hiperłączu. Czy istnieje jakiś sposób sugerowania domyślnej nazwy w znacznikach? Jeśli nie, czy istnieje rozwiązanie JavaScript?
data:application/pdf;name=document.pdf;base64,BASE64_DATA_ENCODED
Odpowiedzi:
Użyj
download
atrybutu:Przykładem na żywo html5-demos.appspot.com / ... .
Obecnie działa na Chrome, Firefox, Edge, Opera i Safari na komputery stacjonarne, ale nie na Safari na iOS ani IE11.
źródło
window.location.replace
. jeśli np. chcesz utworzyć dane: uri lub jeden wygenerowany przezwindow.URL.createObjectURL
i pobrać go jako plik, musisz utworzyć <a> i kliknąć go: jsfiddle.net/flyingsheep/wpQtH (nie,$(...).click()
nie działa)$('<a href="data:text/plain,Test" download="test.txt">')[0].click()
wydaje się tutaj dobrze działać (Chrome 23) (uwaga: użyłemclick
metody natywnej , a nie jQuery). Demo: jsfiddle.net/2zsRWChrome sprawia, że jest to teraz bardzo proste:
źródło
Tylko HTML: użyj
download
atrybutu:Tylko JavaScript: możesz zapisać dowolny identyfikator URI danych za pomocą tego kodu:
Chrome, Firefox i Edge 13+ będą używać podanej nazwy pliku.
IE11, Edge 12 i Safari 9 (które nie obsługują tego
download
atrybutu ) pobiorą plik z jego domyślną nazwą lub po prostu wyświetlą go w nowej karcie, jeśli jest obsługiwanego typu pliku: obrazy, filmy, pliki audio ,…źródło
downloadjs
na npmdata:
identyfikatora URI, o którym wspomina pytanie. Ta odpowiedź działa również z obiektami BLOB i wszystkim innym, które mają identyfikator URIWedług RFC 2397 nie, nie ma.
Ani też nie wydaje się, że każdy atrybut z<a>
elementu, który można użyć albo.Jednak HTML5 wprowadził następnie
download
atrybut tego<a>
elementu, chociaż w momencie pisania obsługa nie jest uniwersalna (na przykład brak obsługi MSIE)źródło
Szukałem trochę w źródłach Firefoxa w netwerk / protokół / dane / nsDataHandler.cpp
procedura obsługi danych analizuje tylko zawartość / typ i zestaw znaków i sprawdza, czy w ciągu znajduje się „; base64”
rfc określa brak nazwy pliku i przynajmniej firefox nie obsługuje nazwy pliku, kod generuje losową nazwę plus „.part”
Sprawdziłem także dziennik firefox
ciekawe pliki, jeśli chcesz spojrzeć na źródła Mozilli:
Myślę, że możesz teraz przestać szukać rozwiązania, ponieważ podejrzewam, że nie ma :)
jak zauważono w tym wątku html5 ma
download
atrybut, działa również na Firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-downloadźródło
Poniższy fragment kodu JavaScript działa w przeglądarce Chrome, używając nowego atrybutu pobierania linków i symulując kliknięcie.
Poniższy przykład pokazuje, że jest to przydatne:
źródło
Nie.
Głównym celem jest to, że jest to strumień danych, a nie plik. Źródło danych nie powinno mieć żadnej wiedzy o kliencie użytkownika przetwarzającym go jako plik ... i tak nie jest.
źródło
data:
bloku danych wewnętrznych w format adresu URL bez konieczności odczytywania go ze źródła opartego na protokole. Link w odpowiedzi @ silex pokazuje, że możliwość zaproponowania preferowanej nazwy do napisania jest uważana za przydatną, nawet jeśli nie została jeszcze zaimplementowana.data:
został specjalnie opracowany w celu umożliwienia (małej) wbudowanej treści wyświetlania w formacie skróconego URL-a, tak aby mógł być używany przez takie rzeczy jak tagi graficzne bez osobnego żądania HTTP. HTML mówi, że treśćimg src
atrybutu musi być adresem URL, więc to właśnie stworzył RFC 2397. Nie ma „źródła danych”.możesz dodać atrybut pobierania do elementu kotwicy.
próba:
źródło
Spójrz na ten link: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html
Zacytować:
Ponadto w pozostałych wiadomościach dyskusji znajdują się informacje.
źródło
Korzystanie z pracowników serwisowych jest wreszcie możliwe w najprawdziwszym tego słowa znaczeniu.
<a href, <img src
, window.open (url), absolutnie wszystko, co można zrobić za pomocą „prawdziwego” adresu URL.Przeglądarka zasugeruje teraz myPrettyName.jpg, nawet jeśli użytkownik otworzy plik w nowej karcie i spróbuje go tam zapisać. Będzie dokładnie tak, jakby plik pochodził z serwera.
źródło
Jest mały skrypt obejścia w Google Code, który działał dla mnie:
http://code.google.com/p/download-data-uri/
Dodaje formularz z zawartymi w nim danymi, przesyła go, a następnie ponownie usuwa formularz. Hacky, ale to zadziałało dla mnie. Wymaga jQuery.
Wątek pojawił się w Google przed stroną Google Code i pomyślałem, że może być pomocne, aby mieć tutaj również link.
źródło
data:...
identyfikatora URI, skrypt tworzy formularz do wysłania go na serwer. A serwer prawdopodobnie przypisze to ponownie jako odpowiedź HTTP „pobieranie” (tj. Z odpowiednim nagłówkiem Content-Disposition określającym nazwę pliku).Oto wersja jQuery oparta na wersji Holfa i współpracuje z Chrome i Firefox, podczas gdy jego wersja wydaje się działać tylko z Chrome. To trochę dziwne, aby dodać coś do ciała, aby to zrobić, ale jeśli ktoś ma lepszą opcję, jestem za tym wszystkim.
źródło
$().appendTo()
variable.click(); variable.remove()
[0]
z dowolnego „elementu jQuery” powinno zwrócić pierwszy reprezentowany przez niego element DOM, co w zasadzie „wyciąga cię z” jQuery.To trochę hackish, ale byłem w tej samej sytuacji wcześniej. Dynamicznie generowałem plik tekstowy w javascript i chciałem go udostępnić do pobrania, kodując go za pomocą URI danych.
Jest to możliwe przy
niewielkiejinterwencji dużego użytkownika. Wygeneruj link<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>
. Jak powiedziałem, jest to nieeleganckie, ale działa, jeśli nie potrzebujesz profesjonalnego rozwiązania.Można to uczynić mniej bolesnym za pomocą flashowania, aby najpierw skopiować nazwę do schowka. Oczywiście, jeśli pozwolisz sobie na użycie Flasha lub Javy (myślę, że teraz z coraz mniejszą obsługą przeglądarki?), Prawdopodobnie możesz znaleźć inny sposób na zrobienie tego.
źródło
download
aby sugerować nazwę, jak wspomniano w wielu innych odpowiedziach .Ten działa z Firefoksem 43.0 (starszy nie testowany):
dl.js:
dl.html
Po kliknięciu przycisku zaoferowano do pobrania plik o nazwie hello.bin . Sztuczka polega na użyciu pliku zamiast obiektu Blob .
odniesienie: https://developer.mozilla.org/de/docs/Web/API/File
źródło
źródło
Możesz to osiągnąć w Chrome i FireFox.
Wypróbuj następujący adres URL, aby pobrać użyty kod.
źródło