45

I'm working on a text editor in pure Javascript. I'd like it so that when the user clicks the 'Save' button, the editor downloads the file. I've already got this partly working:

uriContent = "data:application/octet-stream," + encodeURIComponent(codeMirror.getValue());
newWindow=window.open(uriContent, 'filename.txt');

The file downloads, but the problem is that the file is named 'download'.

Question: How could I change the name of the file to be anything I want, e.g filename.txt?

LasagnaAndroid
  • 2,815
  • 1
  • 16
  • 20
skimberk1
  • 2,064
  • 3
  • 21
  • 27
  • @zzzzBov I think this answer is better than the one you link to because it actually shows a solution for the problem stated. – LasagnaAndroid Feb 06 '14 at 17:59
  • @AdriánSalgado, that doesn't make this question any less a duplicate, however that close vote occurred over 2 years ago. As you can see there wasn't enough support to actually close this question. If you think the other question should have a better answer, then I recommend adding one. – zzzzBov Feb 06 '14 at 18:39
  • Doesn't seem like any good answer yet! It's just a little blackhole in javascript window object I guess! I have the same concern: my code is going to open the file on the fly that contains the report but the filename is not what my code defines. I should not require the user to click a href and download the file. – Jenna Leaf May 15 '15 at 22:42
  • Doesn't seem to work in Chrome Version 55.0.2883.87 m (64-bit), so close though. I'll have to keep pondering. – Master James Jan 28 '17 at 13:54

3 Answers3

29

Replace your "Save" button with an anchor link and set the new download attribute dynamically. Works in Chrome and Firefox:

var d = "ha";
$(this).attr("href", "data:image/png;base64,abcdefghijklmnop").attr("download", "file-" + d + ".png");

Here's a working example with the name set as the current date: http://jsfiddle.net/Qjvb3/

Here a compatibility table for downloadattribute: http://caniuse.com/download

mstrap
  • 16,808
  • 10
  • 56
  • 86
Arthur Clemens
  • 2,848
  • 24
  • 18
24
function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        document.body.appendChild(link); // Firefox requires the link to be in the body
        link.download = filename;
        link.href = uri;
        link.click();
        document.body.removeChild(link); // remove the link when done
    } else {
        location.replace(uri);
    }
}
Unihedron
  • 10,902
  • 13
  • 62
  • 72
Reddy
  • 241
  • 2
  • 2
8

Use the filename property like this:

uriContent = "data:application/octet-stream;filename=filename.txt," + 
              encodeURIComponent(codeMirror.getValue());
newWindow=window.open(uriContent, 'filename.txt');

EDIT:

Apparently, there is no reliable way to do this. See: Is there any way to specify a suggested filename when using data: URI?

Community
  • 1
  • 1
James Hill
  • 60,353
  • 20
  • 145
  • 161
  • Hmm, I tried it and it's still downloading a file named 'download'. This is what my code is right now: `uriContent = "data:application/octet-stream;filename=filename.txt," + encodeURIComponent(codeMirror.getValue()); newWindow=window.open(uriContent, 'filename.txt');` – skimberk1 Oct 10 '11 at 19:59
  • 3
    Doesn't seem to work for the bit of browser testing I've done in Firefox; is this a feature in a different browser? [Wikipedia mentions that Data URL's can't carry filenames](http://en.wikipedia.org/wiki/Data_URI_scheme#Disadvantages). – zzzzBov Oct 10 '11 at 19:59
  • Hmm ok, well thanks for the answer anyway! – skimberk1 Oct 10 '11 at 20:03
  • 4
    This does not work for Firefox. 10.0.9 – Peter Marshall May 10 '13 at 14:57