例如,如果您单击链接:

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

浏览器将提示您下载一个文件,该文件包含超链接本身中以base64保留的数据。有什么办法可以建议标记中的默认名称吗?如果没有,是否有JavaScript解决方案?

评论

也许与此问题无关,但是如果这不是服务器或旧的浏览器障碍,我建议使用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 Con​​tent-Type(!= Content-Disposition)“名称”参数有关(不在RFC中?)

#1 楼

使用download属性:
<a download='FileName' href='your_url'>

download属性可在Chrome,Firefox,Edge,Opera,台式机Safari 10 +,iOS Safari 13+和IE11上使用。

#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