Zapisywanie pliku w JavaScript – Blob

To taka dla mnie nowość, może dla was nie. Ostatnio w trakcie jednego projektu, jedno wymaganie mówiło o tym, ze użytkownik powinien móc ściągnąć dane prezentowane w tabelce jako csv. Jako, że to była aplikacja napisana w JavaScript a do API nie mieliśmy dostępu, trzeba było znaleźć rozwiązanie problemu. Na szczęście na pomoc przyszedł nam sam JavaScript i obiekt typu Blob.

Obiekt, który jak się okazało istnieje już od jakiegoś czasu a jakoś nigdy na niego nie natrafiłem. Całość jest banalnie prosta w użyciu wystarczy podać jako pierwszy argument tablicę danych do zapisania, a jako drugi ustalić typ danych:

var blob = new Blob(['1,2,3,Something Test'], {type: 'text/csv'});

Następnie tak stworzony obiekt możemy na dwa sposoby zapisać (dwa, zależy od przeglądarki oczywiście). Jeżeli mamy IE to możemy wykonać kod wywołujący msSaveBlob albo msSaveOrOpenBlob. Różnica polega na tym czy będziemy próbować otworzyć plik czy też nie.

var saveBlob = window.navigator.msSaveBlob;
if (saveBlob) {
    saveBlob(blob, "filename.csv");
}

Jeżeli zaś nie mamy IE, to:

var a = window.document.createElement("a");

// zwróci coś podobnego do: blob:c64d02ec-14e0-41cf-8784-72bcd9ea9af7 zostanie zwrócone
a.href = window.URL.createObjectURL(blob);

// https://developer.mozilla.org/en/docs/Web/HTML/Element/a#Attributes
a.download = 'filename.csv';

document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Kod już nie jest tak przyjemny, ale działa. Nie ma w nim nic trudnego, po prostu tworzymy linka i klikamy na niego. Warto zwrócić uwagę na atrybut HTML5 – download, który powoduje, ze przeglądarka nie stara się otworzyć linku a jedynie pobrać jego zawartość.

W ten o to prosty sposób można zapisać prawie każdy plik z poziomu przeglądarki – fajny i przyjazny sposób. Znaliście go? :)