在使用data: URI时，是否有任何方法指定建议的文件名?

例如，如果你点击链接:

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

浏览器将提示您下载一个文件，该文件由超链接本身中base64所包含的数据组成。是否有办法在标记中建议一个默认名称?如果不是，是否有JavaScript解决方案?

206427 次浏览
小开

根据RFC 2397，不，没有。

<a>元素中似乎也没有任何属性。

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

小开

不。

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

小开

(这个答案已被新技术淘汰，但出于历史兴趣，将保留在这里。)

这有点怪，但我以前遇到过同样的情况。我正在用javascript动态生成一个文本文件，并希望通过使用data-URI进行编码来提供它供下载。

这可以通过小major用户干预实现。生成一个链接<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>。正如我所说，这是不优雅的，但如果你不需要专业的解决方案，它是可行的。

这可以通过使用flash将名字复制到剪贴板中来减轻痛苦。当然，如果你允许自己使用Flash或Java(现在浏览器的支持越来越少了)，你可能会找到另一种方法来做到这一点

小开
看这个链接: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html < / p >

引用:

它甚至可以在;base64结尾
时工作(就像，不会引起问题一样) 像这样(至少在Opera中):

数据:文本/平原;charset = utf - 8;头= 3附加% % 20附件% 3 b % 20文件名以% 20 spaces.txt % % 3 d % 22 22% 0 3 d % 0 acontent-language % % 20 en; base64 4 oiadqo % 3 d

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

小开

我在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有download属性，它也适用于firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

小开

使用download属性:

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

download属性起作用 Chrome, Firefox, Edge, Opera，桌面Safari 10+， iOS Safari 13+，而不是IE11。

小开

谷歌代码上有一个小的变通脚本，对我有用:

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

它添加一个包含数据的表单，提交该表单，然后再次删除该表单。很粗糙，但对我来说很管用。需要jQuery。

这个线程出现在谷歌谷歌代码页之前，我认为它可能有帮助，在这里也有链接。

小开

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

示例:

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

下面的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")
小开

Chrome使这非常简单:

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

下面是一个基于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();
小开

HTML只有:使用download属性:

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

IE11、Edge 12和Safari 9(其中不支持download属性)将在一个新选项卡中下载其默认名称或者他们只是简单地展示它的文件，如果它是支持的文件类型:图像，视频，音频文件，…

小开

使用服务工作人员，这最终在真正意义上是可能的。

  1. 创建一个假URL。例如/saveAs/myPrettyName.jpg
  2. 在<a href, <img src，窗口中使用URL。open(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 );
}
});
小开 
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
{
var fileData = ['\ufeff' + uri];
var blobObject = new Blob(fileData);
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
}
else //chrome
{
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
fs.root.getFile(fileName, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
var fileData = ['\ufeff' + uri];
var blob = new Blob(fileData);
fileWriter.addEventListener("writeend", function () {
var fileUrl = fileEntry.toURL();
var link = document.createElement('a');
link.href = fileUrl;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, false);
fileWriter.write(blob);
}, function () { });
}, function () { });
}, function () { });
}
小开

这一个适用于Firefox 43.0(旧版本未测试):

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>

如果单击按钮，它会提供一个名为hello.bin的文件供下载。诀窍是使用文件而不是团。

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

小开

你实际上可以在Chrome和FireFox中实现。

尝试下面的url，它将下载使用的代码。

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==
小开

<a href=.. download=.. >适用于左键单击和右键单击->保存链接为..，

但是<img src=.. download=.. >不适用于右键单击>另存图像为..、“;Download.jped"建议。

如果你将两者结合:<a href=.. download=..><img src=..></a>

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

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

使用Chrome/Edge 88进行测试


提交答案