data:application/octet-stream;base64,SGVsbG8=
浏览器将提示您下载一个文件,该文件包含超链接本身中以base64保留的数据。有什么办法可以建议标记中的默认名称吗?如果没有,是否有JavaScript解决方案?
#1 楼
使用download
属性:<a download='FileName' href='your_url'>
download
属性可在Chrome,Firefox,Edge,Opera,台式机Safari 10 +,iOS Safari 13+和IE11上使用。评论
@BioDesign:它甚至适用于chrome中的data:URI。请参阅:jsfiddle.net/pYpqW
–有道理
2012年1月17日下午5:36
但您无法使用window.location.replace做到这一点。如果你例如要创建一个data:uri或window.URL.createObjectURL生成的一个并将其下载为文件,您必须创建一个并单击它:jsfiddle.net/flyingsheep/wpQtH(否,$(。 ..)。click()不起作用)
–飞羊
2012年3月16日18:31
只有所有浏览器都像Chrome一样... [叹气]
–路灯
2012年11月14日13:25
@flyingsheep $('')[0] .click()似乎在这里工作正常(Chrome 23)(注意:我使用了本机点击方法,而不是jQuery的那一种)。演示:jsfiddle.net/2zsRW
– Rob W
2012年12月6日12:34
@flyingsheep似乎他们正在Firefox中强制执行同源策略“在Firefox 20中,该属性仅适用于具有相同起源的资源链接。” developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a在我的测试中,Chrome没有此限制。
–威廉·丹尼斯(William Denniss)
2013年12月19日6:17
#2 楼
如今,Chrome使这一过程变得非常简单:function saveContent(fileContents, fileName)
{
var link = document.createElement('a');
link.download = fileName;
link.href = 'data:,' + fileContents;
link.click();
}
评论
在Chrome 30首次尝试使用此功能时,您会发现其他所有答案都在谈论这个问题。
–迈克尔·J·卡尔金斯(Michael J. Calkins)
13-10-23在14:43
现在可以了,但并不总是那么容易。这些答案中有许多是几年前的。而且它们还适用于其他浏览器。
–高尔夫
13-10-26在10:09
有关浏览器兼容性的完整列表,请参见http://caniuse.com/#feat=download。
– tixastronauta
14年2月13日在10:24
@tixastronauta:尽管有该页面中的信息,但在我的firefox 44中无法正常工作。在Chrome中运行良好。 48
–路易斯·弗洛里特(Luis A. Florit)
16-2-17在13:43
嗨,@ Holf还有一种方法可以像添加文件名一样简单地添加文件类型或扩展名?
–碎冰者
16年5月31日在14:57
#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
属性)将使用其默认名称下载文件,或者如果文件属于受支持的文件类型,它们将仅显示在新标签中:图像,视频,音频文件,... 评论
这两个演示都可以在Chrome 38中正常运行(但应该在Chrome 14+中运行)
–fregante
2014年10月7日18:09
对于更完整的解决方案,我建议在npm上使用downloadjs
–fregante
16-09-28在16:43
它对我有用,但之后浏览器页面刷新。想知道如何预防?
–user6269864
16年11月18日在5:46
由于chromestackoverflow.com/questions/695151/…的限制,文件大小> 2MB的chrome无法使用
–普拉纳夫·辛格(Pranav Singh)
17年2月6日在11:12
限制属于数据:URI,即问题所在。这个答案也适用于Blobs以及其他具有URI的内容
–fregante
17年2月6日在13:27
#4 楼
根据RFC 2397,没有,没有。也没有
<a>
元素的任何属性,您都可以使用。但是HTML5随后有了尽管在编写本文时支持并不普遍(例如,不支持MSIE),但在
download
元素上引入了<a>
属性。评论
第二句话在撰写本文时是正确的,但现在不再适用。到目前为止,它尚未得到广泛实施。
–飞羊
2012年3月16日17:48
查看此评论以获取更多信息:)
–飞羊
2012年3月16日18:44
@flyingsheep,已广泛实施。
–起搏器
15年3月3日在16:04
并不是3年前我写评论时
–飞羊
15年3月3日在22:20
如果文件太长,下载将失败
–deFreitas
16-10-14在16:49
#5 楼
我在netwerk / protocol / data / nsDataHandler.cpp中的firefox源中看了一下在字符串中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 评论
凉!尽管我不一定同意Firefox是存在的最终权威。 :)
–Gleno
2011年6月5日上午10:30
#6 楼
以下Javascript片段通过使用链接的新“下载”属性并模拟点击来在Chrome中工作。 >function downloadWithName(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
评论
这在Firefox中不起作用,我在下面添加了具有Fx兼容性的扩展答案。
–fregante
2014年9月8日下午0:32
#7 楼
否。整个目的是它是数据流,而不是文件。数据源不应该了解将其作为文件处理的用户代理...也不知道。
评论
数据的目的是:将内部数据块转换为URL格式,而不必从基于协议的源中读取。 @silex答案中的链接表明,即使尚未实现,也可以建议使用首选名称来写入该名称。
– Alnitak
2011年6月5日9:27
@Alnitak:有用吗?绝对。技术上合适吗?仍然不服气。 :)
–轨道轻赛
2011年6月5日20:21在
@Tomalak考虑加载数据和保存数据之间的区别-只是因为blob在数据中以内联方式编码:URL并不意味着它不应该具有首选的名称来保存。
– Alnitak
2011年6月5日在20:26
但是您关于“整个目标”的观点是错误的。数据:是专门为允许(小的)内联内容以经过捏造的URL格式显示而专门发明的,因此它可以被图像标签之类的东西使用而无需单独的HTTP请求。 HTML表示img src属性的内容必须是URL,这就是RFC 2397创建的。没有“数据源”。
– Alnitak
2011年6月5日在22:14
@Alnitak:是的。没有数据源。没有上下文。 URI是数据。
–轨道轻赛
2011-6-5 22:22
#8 楼
您可以将下载属性添加到锚元素。样本:
<a download="abcd.cer"
href="data:application/stream;base64,MIIDhTC......">down</a>
#9 楼
查看此链接:http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html
引用:
它甚至可以在末尾使用; base64起作用(不会造成问题)
(至少在Opera中这样): = utf-8; headers = Content-Disposition%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent-Language%3A%20en; base64,4oiaDQo%3D
讨论的其余消息中也有一些信息。
评论
不幸的是,这无法下载。
–詹姆斯·科里(James Khoury)
2011年5月30日,下午2:47
该讨论是针对数据URI格式的拟议扩展-尚未实现。
– Alnitak
2011年5月30日晚上8:14
无论是否实现,在现有支持任意参数的情况下,这都将是一个不错的选择。
–丹·拉格
2012-12-21 17:28
#10 楼
使用服务工作者,最终才有可能在最真实的意义上实现。创建伪造的URL。例如,/saveAs/myPrettyName.jpg
使用
<a href, <img src
中的URL,window.open(url),绝对可以使用“真实” URL进行任何操作。 在工作进程内部,捕获fetch事件,并使用正确的数据进行响应。保存在那里。就像文件来自服务器一样。
// 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 );
}
});
评论
有趣!不过,目前的支持似乎还很薄:caniuse.com/#feat=serviceworkers
– tuomassalo
2015年2月6日在20:49
有什么方法可以使用另一个直接URL“响应”文件吗?
–尤利安·奥诺夫雷(Iulian Onofrei)
16年2月9日在22:10
#11 楼
Google代码上有一个微小的变通办法脚本对我有用:http://code.google.com/p/download-data-uri/
它添加了包含数据的表单,将其提交,然后再次删除该表单。哈基,但它为我做了工作。需要jQuery。
该主题出现在Google Code页面之前的Google中,我认为在此链接也可能会有帮助。
评论
有趣的脚本,但是它确实要求服务器获取响应并将其发送回去吗? jsfiddle.net/hZySf
–詹姆斯·科里(James Khoury)
2012年1月13日在2:03
我不确定文件是从哪里生成的。该文件是否以base64编码存储? (我对base64不太熟悉)
–路灯
2012年11月14日下午13:47
@streetlight:“文件”(即数据)由Javascript生成。该项目的上下文(可能是这里的大多数)假定您有某种方式将所需的数据获取到JS变量中。区别在于,该脚本不是通过数据:... URI呈现给用户,而是创建了一个表单以将其发布到服务器。然后服务器大概会直接回显它,作为HTTP“下载”响应(即使用适当的Content-Disposition标头指定文件名)。
–安德烈·道尔(Andrzej Doyle)
13年1月14日在11:22
#12 楼
这是基于Holf版本的jQuery版本,适用于Chrome和Firefox,而他的版本似乎仅适用于Chrome。在身体上添加一些东西来做到这一点有点奇怪,但是如果有人有更好的选择,我全力以赴。评论
使用jQuery 1.11时,由于.remove()导致出现异常。我通过为变量分配$()。appendTo()然后调用variable.click()来解决这个问题。 variable.remove()
– p0lar_bear
2014年4月4日14:56
@ p0lar_bear您应该在任何jQuery中都获得该异常,因为从任何“ jQuery元素”中获取[0]应该返回它表示的第一个DOM元素,这实际上“使您脱离了” jQuery。
–drzaus
2014年12月11日在20:16
实际上,您根本不需要添加/删除元素-请参阅stackoverflow.com/a/17311705/1037948上的注释
–drzaus
2014年12月11日20:18
#13 楼
这有点骇人听闻,但我以前也遇到过这种情况。我当时正在用javascript动态生成一个文本文件,并希望通过使用data-URI对其进行编码来提供下载的文件。生成链接<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>
。就像我说的那样,这很不雅致,但是如果您不需要专业的解决方案,它就可以工作。当然,如果您允许自己使用Flash或Java(我认为现在对浏览器的支持越来越少了?),您可能会找到另一种方法。评论
这不是解决方案,不能满足要求。抱歉。
– jcolebrand
2011年6月5日在21:38
大声笑@“较小的用户干预”。让用户为您完成全部任务不是“较小的用户干预”。
–轨道轻赛
2011年6月6日20:28
将此与stackoverflow.com/questions/17311645/…结合以触发生成的链接,并且您不需要用户干预。您可以指定HTML5下载属性,以建议其他答案提到的名称。
–drzaus
2014年7月2日在15:11
对于Safari而言,这是一个不错的解决方法。使用Modernizr来检测何时不支持下载属性并更新链接文本!
–littledynamo
16年5月31日在21:44
#14 楼
此版本适用于Firefox 43.0(未经测试的旧版本):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;
}
如果单击按钮,它将提供名为hello.bin的文件供下载。技巧是使用文件代替Blob。
参考:https://developer.mozilla.org/de/docs/Web/API/File
#15 楼
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 () { });
}
评论
请在您的答案中添加更详细的说明-stackoverflow.com/help/how-to-answer
– Sebastian Brosch
15年11月25日在13:29
这个答案是垃圾
–乔纳森·泰勒(Jonathan Taylor)
17年7月20日在16:54
#16 楼
您实际上可以在Chrome和FireFox中实现此目标。尝试以下URL,它将下载使用的代码。
data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==
评论
也许与此问题无关,但是如果这不是服务器或旧的浏览器障碍,我建议使用blob的&URL.createObjectURL某些浏览器支持媒体类型的可选参数“名称”:data:application / pdf; name = document.pdf; base64,BASE64_DATA_ENCODED
我遇到了Firefox pdf.js的问题,如果它无法从数据uri中提取文件名,则在某些情况下它会挂起。参见stackoverflow.com/questions/45585921/…
@mems哪些浏览器支持“ name”参数?您可以指出一些参考文档吗? (我的Google-fu使我失败了)。
@DimuDesigns当时至少是Firefox。看来情况已不再如此。它与MIME Content-Type(!= Content-Disposition)“名称”参数有关(不在RFC中?)