有没有办法在使用数据时指定建议的文件名:URI？

Question

例如,如果您点击链接:

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

浏览器将提示您下载一个文件,该文件由超链接本身中作为base64保存的数据组成.有没有办法在标记中建议默认名称？如果没有,是否有JavaScript解决方案？

Answer 1

使用download属性:

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

html5-demos.appspot.com/...上的实例.

目前适用于 Chrome,Firefox,Edge,Opera和桌面Safari,但不适用于iOS Safari或IE11.

Answer 2

Chrome现在非常简单:

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

Answer 3

仅限HTML:使用download属性:

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

仅限Javascript:您可以使用以下代码保存任何数据URI:

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和Edge 13+将使用指定的文件名.

IE11,Edge 12和Safari 9(不支持该download属性)将使用其默认名称下载文件,或者如果它是受支持的文件类型,它们将只显示在新选项卡中:图像,视频,音频文件,...

如果现在需要更好的兼容性,请使用基于Flash的Downloadify作为后备.

Answer 4

根据RFC 2397,不,没有.

有也没有出现任何属性的的<a>,你可以使用元素.

然而,HTML5随后download在<a>元素上引入了属性,尽管在编写时支持不是通用的(例如,没有MSIE支持)

Answer 5

我在netwerk/protocol/data/nsDataHandler.cpp中查看了一些firefox源代码

数据处理程序只解析内容/类型和字符集,并查看字符串中是否有"; base64"

rfc指定没有文件名,至少firefox没有处理它的文件名,代码生成一个随机名称加上".part"

我也检查了firefox日志

[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

有趣的文件,如果你想看看Mozilla来源:

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

我想你现在可以停止搜索解决方案,因为我怀疑没有:)

正如在这个帖子中注意到的html5有download属性,它也适用于firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

Answer 6

以下Javascript代码段可在Chrome中使用链接的新"下载"属性并模拟点击.

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

以下示例显示了它的用法:

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

Answer 7

没有.

整个目的是它是一个数据流,而不是一个文件.数据源不应该知道用户代理将其作为文件处理......而事实并非如此.

Answer 8

您可以将下载属性添加到锚元素.

样品:

<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>

Answer 9

请看这个链接:http: //lists.w3.org/Archives/Public/uri/2010Feb/0069.html

引用:

它甚至可以工作(如同,不会引起问题);最后
像这样的base64 (至少在Opera中):

数据:文本/无格式;字符集= UTF-8;标头=内容处置%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent语言%3A%20en; base64,4oiaDQo% 3D

此外,讨论的其余信息中还有一些信息.

Answer 10

使用服务工作者,这最终可能是最真实的.

1. 创建一个假URL.例如/saveAs/myPrettyName.jpg
2. 在<a href, <img srcwindow.open(url)中使用URL ,绝对可以使用"真实"URL完成任何操作.
3. 在worker中,捕获fetch事件,并使用正确的数据进行响应.

即使用户在新选项卡中打开文件,浏览器现在也会建议myPrettyName.jpg,并尝试将其保存在那里.它就像文件来自服务器一样.

// In the service worker
self.addEventListener( 'fetch', function(e)
{
    if( e.request.url.startsWith( '/blobUri/' ) )
    {
        // Logic to select correct dataUri, and return it as a Response
        e.respondWith( dataURLAsRequest );
    }
});