有什么办法在使用数据时指定建议的文件名：URI？

问题描述

例如，如果您按照以下链接：

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

浏览器将提示您下载包含超链接本身保存为 base64 的数据的文件。有没有办法在标记中建议默认名称？如果没有，是否有 JavaScript 解决方案？

最佳解决方案

使用 download 属性：

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

html5-demos.appspot.com/… 的实例。

Currently works on Chrome，Firefox，Edge，Opera，但不是 Safari 10 或 IE11 。

次佳解决方案

Chrome 这几天非常简单：

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

第三种解决方案

根据 RFC 2397，不，没有。

也不会有任何 attribute 的<a> 元素，您也可以使用。

不过，HTML5 随后在<a> 元素上引入了 download 属性，尽管在编写支持时并不普及 (例如，不支持 MSIE)

第四种方案

仅 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，Edge12 和 Safari 9(不支持 download 属性) 将以默认名称下载该文件，或者将其简单地显示在新的选项卡中，如果它是受支持的文件类型：图像，视频，音频文件…

如果现在需要更好的兼容性，请使用 Flash-based Downloadify 作为后备。

第五种方案

我在 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

第六种方案

没有。

整个目的是它是一个数据流，而不是一个文件。数据源不应该有任何知识的用户代理处理它作为一个文件… 而不是。

第七种方案

以下 JavaScript 代码段可以在 Chrome 中使用新的’download’ 属性链接并模拟点击。

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

以下示例显示它的用途：

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

第八种方案

您可以向锚点元素添加一个下载属性。

样品：

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

第九种方案

看这个链接：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):

data:text/plain;charset=utf-8;headers=Content-Disposition%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent-Language%3A%20en;base64,4oiaDQo%3D

在讨论的其余消息中也有一些信息。

第十种方案

Google 代码上有一个小巧的解决方法脚本适用于我：

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

它添加一个表单中的数据，提交它，然后再次删除该表单。哈基，但是为我做了工作。需要 jQuery 。

Google 线程在 Google 代码页面之前出现了这个线程，我认为在这里也可能有帮助。

参考文献

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

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

有什么办法在使用数据时指定建议的文件名：URI？