[Solved-6 Solutions] Create a file in memory for user to download, not through server - javascript tutorial
Problem:
How to Create a file in memory for user to download, not through server ?
Solution 1:
The following function allow to download a file directly in the browser without any server.
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
document.getElementById("dwn-btn").addEventListener("click", function(){
// Generate download of hello.txt file with some content
var text = document.getElementById("text-val").value;
var filename = "hello.txt";
download(filename, text);
}, false);Solution 2:
Here we can use data URIs.
<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>
The octet-stream is to force a download prompt. Otherwise, it will probably open in the browser.
For CSV, we can use:
<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV OcteSolution 3:
The above example works fine in chrome and IE, but fail in Firefox. Please do consider appending an anchor to the body and removing it after click.
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';
// Append anchor to body.
document.body.appendChild(a);
a.click();
// Remove anchor from body
document.body.removeChild(a);
Solution 4:
Using FileSaver.js. Its compatibility is good for IE10+, and it's very simple to use:
var wikitechy = new Wikitechy(["some text"], {
type: "text/plain;charset=utf-8;",
});
saveAs(wikitechy, "thing.txt");
Solution 5:
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>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. URI On the other hand, IE has API for saving a blob, which can be used to create and download files.
Solution 6:
This solution is extracted directly from github repository.
function(filename,text){
// Set up the link
var link = document.createElement("a");
link.setAttribute("target","_blank");
if(Blob !== undefined) {
var blob = new Blob([text], {type: "text/plain"});
link.setAttribute("href", URL.createObjectURL(blob));
} else {
link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
}
link.setAttribute("download",filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}