How to Download Data as a File From JavaScript

I’m currently working on an HTML/JavaScript application that allows you to author content entirely on the client. I want to let users download that content and save it locally, but without bouncing it off a server. After some trial and error, I have it working fairly well using a data URI. Rather than explain it, it’s probably easiest just to show the code:

HTML:

<a href="javascript:onDownload();">Download</a>

JavaScript code:

function onDownload() {
    document.location = 'data:Application/octet-stream,' +
                         encodeURIComponent(dataToDownload);
}

The only limitation is that I can’t figure out a way to give the downloaded file a name (and have concluded that it’s not currently possible, though I’m happy to be proven wrong). I’ve only tested the code in Safari and Chrome, and in both cases, the file name defaults to "download" (with no extension). All the data is in the file, but it’s not a very intuitive experience for the end user.

I’ll be releasing the application shortly which should demonstrate why downloading data directly from the client can be useful. In the meantime, I’m curious if this is something any of you might use, and if so, if you think the file name issue should be fixed.

Let me know in the comments.

11 Responses to How to Download Data as a File From JavaScript

  1. michaud says:

    Checked Chrome and could save a file. IE9 first says it restricted the page from running scripts or ActiveX controls. If you allow the ‘blocked content’ then it tries to open the link as an url, puts it in the address bar and then says it can’t open the page.

  2. Darryl Pogue says:

    Couldn’t you also use the HTML5 download attribute on the link itself? It allows you to specify a suggested filename.
    http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

    <a href=”data:image/jpeg,…..” download=”myfile.jpg”>Download this image</a>

  3. katopz says:

    katopz not katopx btw, ;p #typo

  4. katopz says:

    // look like my comment is replace if i repost, sorry if this double post ;o

    not sure this help -> http://blogs.msdn.com/b/ie/archive/2012/01/27/creating-files-through-blobbuilder.aspx

  5. Pingback: javascript – filedownload « tinkosblog

    • Hi, Paul. This would have actually been the perfect solution, however I found that it doesn’t work with JavaScript. In other words, if you just point to a resource on the server, it works fine, but if you try to generate the content dynamically in JS, the click event is dropped and nothing happens.

      Do you know if this is expected behavior? It would be great to see this feature extended so that it works with JS. You think it’s worth filing a bug/change request?

  6. Maxime Euziere says:

    The only way to give a filename to your download is passing it through flash.
    Downloadify does that very well: https://github.com/dcneiner/Downloadify

  7. Gabriel Mariani says:

    So using the createObjectURL doesn’t work with generated content?
    https://developer.mozilla.org/en/Document_Object_Model_(DOM)/window.URL.createObjectURL

  8. Why not try this?

    Download File

    window.URL = window.URL || window.webkitURL;

    document.getElementById(‘download’).onclick = function () {
    var a = document.createElement(‘a’);
    var blob = new Blob([dataToDownload], {‘type’:’application\/octet-stream’});
    a.href = window.URL.createObjectURL(blob);
    a.download = ‘filename.ext’;
    a.click();
    };