Jak uzyskać przeglądarkę internetową, aby pobrać plik zapisany w ciągu JavaScript?

Question

byłem w stanie napisać JavaScript, aby spowodować przeglądarkę, aby pobrać plik ze zdalnego serwera przy użyciu kodu:

var iframe = document.createElement("iframe"); 
iframe.style.display = "none"; 
iframe.src = "filename.zip" 
document.body.appendChild(iframe); 

który działa świetnie. Jednak teraz mam inną sytuację, w której zawartość pliku jest przechowywana w ciągu znaków w moim JavaScript po stronie przeglądarki i muszę wyzwolić pobieranie tego pliku. Próbowałem zastępując trzecią linię wyżej z tym, gdzie „myFileContents” to ciąg zawierający rzeczywiste bajtów pliku:

iframe.src = "data:application/octet-stream;base64," + Base64.encode(myFileContents); 

to pobiera plik pobrany, ale nazwa pliku jest stracone. W Chrome nazwa pliku to "pobierz". Przeczytałem również, że w niektórych wersjach przeglądarek istnieją ograniczenia dotyczące rozmiaru pliku.

Czy istnieje sposób, aby to osiągnąć? Używanie JQuery byłoby OK. Rozwiązanie musi obsługiwać dowolny typ pliku - zip, pdf, csv, PNG, JPG, XLS, itp ...

Answer 1

W some newer browsers można użyć nowego HTML5 download attribute na metce a do osiągnięcia tego celu:

var a = document.createElement('a'); 
a.download = "filename.txt"; 
a.href = "data:application/octet-stream;base64," + Base64.encode(myFileContents); 
a.click(); 

Dla przyszłego rozwiązania można zajrzeć do HTML5 FileSystem API, ale ten interfejs API to not currently supported in most of the major browsers. Może ci się nie przydać, z wyjątkiem tego, że może dostarczyć ci inny sposób przechowywania plików lokalnie, jeśli będziesz z tym w porządku. Ale nie przechowuje plików w lokalnie dostępnym systemie plików użytkownika, musisz stworzyć własny interfejs przeglądarki, aby użytkownicy mogli wchodzić w interakcje z plikami. Pobranie plików z systemu plików HTML5 do lokalnego systemu plików użytkowników zostanie w każdym przypadku ponownie wykonane przy użyciu nowego atrybutu pobierania w tagu a, który będzie odwoływał się do lokalizacji w systemie plików HTML5, zamiast odnoszenia się do lokalizacji online .

Aby to zrobić z elementem iframe byś jakoś ustawić nagłówek Content-Disposition żądanie w iframe do inline; filename="filename.txt" użyciu po stronie klienta JavaScript, ja nie sądzę, że jest możliwe, aby to zrobić, najprawdopodobniej ze względu na kwestie bezpieczeństwa. Jeśli naprawdę nie masz żadnej innej opcji, możesz zabić wydajność szybkości pobierania, wysyłając ciąg znaków do serwera przy użyciu AJAX, a następnie pobierając go stamtąd z ustawionym prawym nagłówkiem żądania.