Fájl létrehozása és letöltése javascriptből

A minap futottam bele a problémába, hogy böngészőből kellene letölteni egy frontenden megszűrt és csak ideiglenesen ott létező listát. Gyorsan rákerestem a megoldásra és a következő javascript kódot találtam hozzá:

    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        // fájlt tartalma
        var str = "hi,file";

        createDownloadLink("#export",str,"file.txt");
    });

A letöltő funkcionalitást a createDownloadLink függvény meghívásával linkeljük a html-ünkben található linkhez. Egyetlen megkötés van még. A linkünknek kell lennie egy download attributumának. Böngészőfüggetlen működéshez kell. A kód az alábbi böngészőkben működik: IE11+, Firefox 25+ és Chrome 30. A 9. sorban megadott fájl formátummal és karakterkódolással kedvünk szerint játszhatunk. Én sima text és csv fájllal próbáltam. Jelentem működik 🙂

<a id="export" class="myButton" download="" href="#">export</a>

Így kellene kinéznie a linkünknek. Természetesen a szöveg és a class bátran cserélhető.