Jak utworzyć plik dynamicznie w przeglądarce

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 nie 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ąć a potem można go usunąć. Wykona się to tak szybko, że nawet nie będzie widać, że coś zostało dodane do strony.

function download(url, filename) {
    var link = document.createElement('a');
    link.setAttribute('href', url);
    link.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:

• createObjectURL
• atrybut download
• konstruktor Blob

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.