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

前端未结

关注

 16  1653

佛祖请我去吃肉

If for example you follow the link:

data:application/octet-stream;base64,SGVsbG8=

The browser will prompt you to download a file consisting of t

相关标签:

16条回答

暗喜

2020-11-22 03:52

This one works with Firefox 43.0 (older not tested):

dl.js:

function download() {
  var msg="Hello world!";
  var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});

  var a = document.createElement("a");
  a.href = URL.createObjectURL(blob);

  window.location.href=a;
}

dl.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="dl.js"></script>
</head>

<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>

If button is clicked it offered a file named hello.bin for download. Trick is to use File instead of Blob.

reference: https://developer.mozilla.org/de/docs/Web/API/File

0 讨论(0)

予麋鹿

2020-11-22 03:53

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.

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, …

0 讨论(0)

情歌与酒

2020-11-22 03:54
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")
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
庸人自扰

2020-11-22 03:54

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

http://code.google.com/p/download-data-uri/

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
情深已故

2020-11-22 03:56
you can add a download attribute to the anchor element.

sample:
```
<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
我寻月下人不归

2020-11-22 03:58

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)

0 讨论(0)
发布评论:

提交评论
- 加载中...