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:
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?


Solution 1:

Use the download attribute:

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

Live example on….

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'); = fileName;
    link.href = 'data:,' + fileContents;;

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 === 'string') {
    link.href = uri; = filename;

    //Firefox requires the link to be in the body
    //simulate click;

    //remove the link when done
  } else {;

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

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"); = name;
  link.href = uri;;

And the following example shows it’s use:

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