Computer Keyboard - Głównie JavaScript

Głównie JavaScript

by

Jak utworzyć plik dynamicznie w przeglądarce

Zdjęcie kartoteki folderów i plików
źródło wallpaperflare.com; licencja Domena Publiczna

W tym krótkim wpisie przedstawię jak utworzyć plik dynamicznie w przeglądarce, a następnie pobrać go na dysk.

Pierwszą rzeczą jaką trzeba zrobić, to utworzenie obiektu Blob z naszą zawartością. W przypadku plików tekstowych jest to najprostsze, bo wystarczy wywołać:

var file = new Blob([string], { type: 'text/plain' });

Ważne jest, aby pamiętać, że trzeba przekazać tablicę z naszym łańcuchem znaków, inaczej to nie zadziała.

Następnie trzeba utworzyć URL, będzie on potrzebny za chwilę:

var url = URL.createObjectURL(file);

createObjectURL jest to bardzo fajne API, ponieważ nasz blob jest w pamięci, a funkcja utworzy specjalny link do tego miejsca w pamięci (tak przynajmniej mi się wydaje że to działa) w każdym razie dostaniemy specjalny URL, który zawiera hash naszego bloba. Dzięki temu można pobrać bardzo duże pliki i trzeba się przejmować, że przekroczymy limit długości URL-a. Jeśli nie mamy tej funkcji trzeba użyć starego API czyli data URL, jest to sposób zawarcia danych bezpośrednio w URL. Więcej na temat data URL, na stronie MDN.

Teraz wystarczy pobrać ten plik na dysk. Do tego celu wystarczy utworzyć link, dodać go do strony, kliknąć o potem można go usunąć. Wykona się to tak szybko, że nawet nie będzie widać, że coś zostało dodane do strony.

function downoad(url, filename) {
    var link = document.createElement('a');
    link.setAttribute('href', url);
    setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

I to wszystko co trzeba zrobić.

Poniżej wsparcie przeglądarek dla użytych API:

Istnieje także bardziej zaawansowany sposób tworzenia plików, które można otworzyć poprzez pasek adresu przeglądarki jak normalne pliki. Przeczytasz o tym we wpisie: Server WWW w przeglądarce.

źródło strony (aby zobaczyć kod na GitHubie, musisz kliknąć przycisk raw)
Komentarze

Hasło, które podasz umożliwi ponowne zalogowanie się i np. usunięcie komentarza, jest dobrowolne. Email jest szyfrowany i używany do wysyłania powiadomień o odpowiedziach do komentarzy oraz do pobierania awatara dzięki usłudze Gravatar.com.