Is there any way to specify a suggested filename when using data: URI?

Is there any way to specify a suggested filename when using data: URI?

If for example you follow the link:
data:application/octet-stream;base64,SGVsbG8=
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?

Solutions/Answers:

Solution 1:

Use the download attribute:

<a download='FileName' href='your_url'>

Live example on html5-demos.appspot.com/….

Currently works on Chrome, Firefox, Edge, Opera, and desktop Safari but not iOS Safari or IE11.

Solution 2:

Chrome makes this very simple these days:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

Solution 3:

HTML only: use the download attribute:

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

Javascript only: you can save any data URI with this code:

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);
    
    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

Chrome, Firefox, and Edge 13+ will use the specified filename.

Related:  Loading an AngularJS controller dynamically

IE11, Edge 12, and Safari 9 (which don’t support the download attribute) will download the file with their default name or they will simply display it in a new tab, if it’s of a supported file type: images, videos, audio files, …


If need better compatibility now, use the Flash-based Downloadify as a fallback.

Solution 4:

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.

However HTML5 has subsequently introduced the download attribute on the <a> element, although at the time of writing support is not universal (no MSIE support, for example)

Solution 5:

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”

Related:  Why aren't ◎ܫ◎ and ☺ valid JavaScript variable names?

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

Solution 6:

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

function downloadWithName(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.click();
}

And the following example shows it’s use:

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")