Create a file using Javascript in Chrome on client side
I would like to know if I can create a text file and save the file in the users "Downloads" section in his/her computer using Javascript. The way my feature should work is when the user clicks the submit button, I populate the users info in the text file and then save it in his machine. I would like this to work in Google Chrome.
Is this possible? I have seen posts that specifically tell me that it is a serious security issue.
Solution 1:
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() {});
Solution 2:
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.
Solution 3:
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.
Solution 4:
Try this:
document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"'>Your Download</a>";
document.getElementById('test').click();
if you want to set the filename use download
attribute of anchor tag:
document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"' download=yourfilename>Your Download</a>";
document.getElementById('test').click();