[Solved-6 Solutions] Create a file in memory for user to download, not through server - javascript tutorial


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';
// 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 Octe

Solution 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.

// Remove anchor from body

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>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
                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";


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.

    // Set up the link
    var link = document.createElement("a");
    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));

Related Searches to javascript tutorial - Create a file in memory for user to download, not through server