Take the 2-minute tour ×

If for example you follow the link:


The browser will prompt you to download a file consisting of the data held as base64 in the hyperlink itself. Is there any way of suggesting a default name in the markup? If not, is there a JavaScript solution?

share|improve this question
I'm starting a bounty on this. There's gotta be SOME way to do this without Flash (i.e. without Downloadify), right? –  Dan Fabulich May 30 '11 at 0:00
@Dan Fabulich NOT AN OPTION. Sorry mate. I would love for it to happen too, but you would have to use headers to do that, and this way has no way to generate headers. I suggest awarding the bounty to Tomalak on account of he's the most accurate of the below answers. –  jcolebrand Jun 5 '11 at 21:37
add comment

11 Answers

Google just announced a demo of a new "download" atttribute of <a> anchor elements which allows you to set the filename of the link. Usable only in Chrome 14. http://html5-demos.appspot.com/static/a.download.html

share|improve this answer
This answer is the only complete one. No you can't do it with data: URI. Yes you can provide a file name to a download link with pure Javascript. Thanks! –  Biovisualize Nov 17 '11 at 16:03
@BioDesign: It works even with data:URI's in chrome. See: jsfiddle.net/pYpqW –  Senseful Jan 17 '12 at 5:36
but you can’t do it with window.location.replace. if you e.g. want to create a data:uri or one generated by window.URL.createObjectURL, and download that as file, you’ll have to create an <a> and click it: jsfiddle.net/flyingsheep/wpQtH (no, $(...).click() doesn’t work) –  flying sheep Mar 16 '12 at 18:31
It's a WHATWG feature that Google implements, but since it's an (unofficial) standard it could get popular. whatwg.org/specs/web-apps/current-work/multipage/… –  orip Aug 2 '12 at 11:58
Only if all browser were like Chrome... [sigh] –  streetlight Nov 14 '12 at 13:25
show 4 more comments

According to RFC 2397, no, there isn't.

Nor does there appear to be any attribute of the <a> element that you can use either.

share|improve this answer
the second sentence was right at the time of writing, but isn’t anymore. as of now, it isn’t yet widely implemented, though. –  flying sheep Mar 16 '12 at 17:48
@flyingsheep interesting - thanks for the link! –  Alnitak Mar 16 '12 at 18:26
see this comment for more info :) –  flying sheep Mar 16 '12 at 18:44
add comment

I've looked a bit in firefox sources in netwerk/protocol/data/nsDataHandler.cpp

data handler only parses content/type and charset, and looks if there is ";base64" in the string

the rfc specifices no filename and at least firefox handles no filename for it, the code generates a random name plus ".part"

I've also checked firefox log

[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0

interesting files if you want to look at mozilla sources:

data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp

I think you can stop searching a solution for now, because I suspect there is none :)

as noticed in this thread html5 has download attribute, it works also on firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

share|improve this answer
Cool! Although I don't necessarily agree that Firefox is the ultimate authority on what exists. :) –  Gleno Jun 5 '11 at 10:30
add comment


The entire purpose is that it's a datastream, not a file. The data source should not have any knowledge of the user agent handling it as a file... and it doesn't.

share|improve this answer
The purpose of data: is to fudge a block of internal data into URL format without having to read it from a protocol-based source. The link in @silex's answer shows that the ability to suggest a preferred name to write it to is considered useful, even if it's not implemented yet. –  Alnitak Jun 5 '11 at 9:27
@Alnitak: Useful? Absolutely. Technically appropriate? Still not convinced. :) –  Lightness Races in Orbit Jun 5 '11 at 20:21
@Tomalak consider the difference between loading the data and saving it - just because a blob is encoded inline in a data: URL doesn't mean that it shouldn't have a preferred name for saving it to. –  Alnitak Jun 5 '11 at 20:26
But your line about it's "entire purpose" is wrong. data: was specifically invented to allow (small) inline content to appear in a fudged-together URL format so that it could be used by things like image tags without a separate HTTP request. HTML says the content of a img src attribute must be a URL, so that's what RFC 2397 created. There is no "data source". –  Alnitak Jun 5 '11 at 22:14
@Alnitak: Exactly. There's no data source. There's no context. The URI is the data. –  Lightness Races in Orbit Jun 5 '11 at 22:22
show 1 more comment

Chrome makes this very simple these days:

function saveContent(fileContents, fileName)
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
share|improve this answer
Idk what all these other answers are talking about this worked on first try in Chrome 30. –  Michael Calkins Oct 23 '13 at 14:43
It does now but it wasn't always so easy. Many of these answers are from years ago. And they also work for other browsers. –  Holf Oct 26 '13 at 10:09
Refer to http://caniuse.com/#feat=download for a complete list of browser compatibility. –  tixastronauta Feb 13 at 10:24
add comment

The following Javascript snippet works in Chrome by using the new 'download' attribute of links and simulating a click.

function downloadWithName(uri, name) {

    function eventFire(el, etype){
        if (el.fireEvent) {
            (el.fireEvent('on' + etype));
        } else {
            var evObj = document.createEvent('Events');
            evObj.initEvent(etype, true, false);

    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    eventFire(link, "click");


And the following example shows it's use:

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")
share|improve this answer
Beautiful, thanks so much –  Nile Jul 10 '13 at 21:56
add comment

There is a tiny workaround script on Google Code that worked for me:


It adds a form with the data in it, submits it and then removes the form again. Hacky, but it did the job for me. Requires jQuery.

This thread showed up in Google before the Google Code page and I thought it might be helpful to have the link in here, too.

share|improve this answer
Interesting script but it does require the server to get the response ans send it back right? jsfiddle.net/hZySf –  James Khoury Jan 13 '12 at 2:03
Looks like it. As I wrote, hacky workaround.. –  Fabian B. Jan 13 '12 at 21:48
I'm not sure where the file is being generated from.. is that file being stored in the base64 encode? (I'm not too familiar with base64) –  streetlight Nov 14 '12 at 13:47
@streetlight: The "file" (i.e. data) is generated by Javascript. The context of that project (and probably most here) assume that you have some way of getting your desired data into a JS variable. The difference is that instead of presenting it to the user via a data:... URI, that script creates a form to POST it to the server. And the server then presumably echoes it straight back as an HTTP "download" response (i.e. with an appropriate Content-Disposition header specifying the filename). –  Andrzej Doyle Jan 14 '13 at 11:22
add comment

you can add a download attribute to the anchor element.


<a download="abcd.cer"
share|improve this answer
It works for chrome –  diyism Jan 28 '13 at 8:06
add comment

Look at this link: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html


It even works (as in, doesn't cause a problem) with ;base64 at the end
like this (in Opera at least):


Also there is some info in the rest messages of the discussion.

share|improve this answer
unfortunately this does not download. –  James Khoury May 30 '11 at 2:47
this discussion was for a proposed extension to the data URI format - it hasn't been implemented. –  Alnitak May 30 '11 at 8:14
Implemented or not, with existing support for arbitrary parameters this would be a great. –  Dan Lugg Dec 21 '12 at 17:28
add comment

Here is a jQuery version based off of Holf's version and works with Chrome and Firefox whereas his version seems to only work with Chrome. It's a little strange to add something to the body to do this but if someone has a better option I'm all for it.

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
share|improve this answer
With jQuery 1.11 I get an exception because of the .remove(). I got around this by assigning $().appendTo() to a variable then calling variable.click(); variable.remove() –  p0lar_bear Mar 4 at 14:56
add comment

It's kind of hackish, but I've been in the same situation before. I was dynamically generating a text file in javascript and wanted to provide it for download by encoding it with the data-URI.

This is possible with minormajor user intervention. Generate a link <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. As I said, this is inelegant, but it works if you do not need a professional solution.

This could be made less painful by using flash to copy the name into the clipboard first. Of course if you let yourself use Flash or Java (now with less and less browser support I think?), you could probably find a another way to do this.

share|improve this answer
This is not a solution and does not meet what was asked for. Sorry. –  jcolebrand Jun 5 '11 at 21:38
Lol @ "minor user intervention". Getting the user to do the whole thing for you is not "minor user intervention". –  Lightness Races in Orbit Jun 6 '11 at 20:28
add comment

Your Answer

