例如，如果您点击以下链接：
data:application/octet-stream;base64,SGVsbG8=
浏览器将提示您下载一个文件，该文件由超链接本身中以 base64 格式保存的数据组成。有没有办法在标记中建议默认名称？如果没有，是否有 JavaScript 解决方案？
在使用 data: URI 时，有没有办法指定建议的文件名？
IT技术
javascript
html
url
data-uri
save-as
2021-01-30 17:50:27
6个回答
使用download属性：
<a download='FileName' href='your_url'>
该download属性适用于Chrome、Firefox、Edge、Opera、桌面 Safari 10+、iOS Safari 13+，不适用于 IE11。
如今，Chrome 使这变得非常简单：
function saveContent(fileContents, fileName)
{
var link = document.createElement('a');
link.download = fileName;
link.href = 'data:,' + fileContents;
link.click();
}
仅 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属性）将使用其默认名称下载文件，或者如果文件类型受支持，则它们只会在新选项卡中显示它：图像、视频、音频文件, ...
我在 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