Create a file using Javascript in Chrome on client side Create a file using Javascript in Chrome on client side google-chrome google-chrome

Create a file using Javascript in Chrome on client side


Sure you can, using the brand new APIs.

 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {    fs.root.getFile('test.bin', {create: true}, function(fileEntry) { // test.bin is filename        fileEntry.createWriter(function(fileWriter) {            var arr = new Uint8Array(3); // data length            arr[0] = 97; // byte data; these are codes for 'abc'            arr[1] = 98;            arr[2] = 99;            var blob = new Blob([arr]);            fileWriter.addEventListener("writeend", function() {                // navigate to file, will download                location.href = fileEntry.toURL();            }, false);            fileWriter.write(blob);        }, function() {});    }, function() {});}, function() {});


Enter this into the Chrome browser

data:text;charset=utf-8,helloWorld

So to construct the download for your users you would do something like

data='<a href='data:text;charset=utf-8,'+uriEncode(yourUSERdataToDownload)+' >Your Download</a>

Then inject it into the dom for your user to press.


The following method works in IE11+, Firefox 25+ and Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a><script>    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 () {        var str = "hi,file";        createDownloadLink("#export",str,"file.txt");    });</script>

See this in Action: http://jsfiddle.net/Kg7eA/

Firefox and Chrome support data URI for navigation, which allows us to create files by navigating to a data URI, while IE doesn't support it for security purposes.

On the other hand, IE has API for saving a blob, which can be used to create and download files.