使用download属性:

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

下载属性适用于Chrome、Firefox、Edge、Opera、桌面版Safari 10+、iOS Safari 13+，但不适用于IE11。

< a href = . .下载= . .>工作左键和右键->保存链接为..，

但是<img src=..下载= . .右击>不工作->保存图像为..，建议“Download.jped”。

如果你把两者结合起来:<a href=.下载= . .> < img src = . . > < / >

它适用于左键单击，右键单击->保存链接为..，右键单击->保存图像为..

你必须写两次data-uri (href和src)，所以对于大的图像文件，最好是用javascript复制uri。

使用Chrome/Edge 88进行测试

No.

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

我在firefox的network /protocol/data/nsDataHandler.cpp中查找了一些

数据处理程序只解析内容/类型和字符集，并查看是否有“;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有下载属性，它也适用于firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

下面是一个基于Holf版本的jQuery版本，可用于Chrome和Firefox，而他的版本似乎只适用于Chrome。在身体上添加一些东西来做到这一点有点奇怪，但如果有人有更好的选择，我完全支持。

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].click().remove();

使用服务工作者，这最终在真正意义上成为可能。

创建一个假URL。例如/saveAs/myPrettyName.jpg 在<a href， <img src，窗口中使用URL。open(url)，绝对可以用“真正的”url做任何事情。 在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 );
    }
});