Question

例如，如果您点击链接：

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

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

Answer 1

使用download属性：

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

html5-demos.appspot.com/...上的实例。

Currently works on Chrome，Firefox，Edge，Opera和桌面Safari，但不包括iOS Safari或IE11。

Answer 2

Chrome现在非常简单：

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

Answer 3

仅限HTML ：使用download属性：

＆＃13;

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

＆＃13;

仅限Javascript：您可以使用以下代码保存任何数据URI：

＆＃13;

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');

＆＃13;

Chrome，Firefox和Edge 13 + 将使用指定的文件名。

IE11，Edge 12和Safari 9 （don't support the download attribute）将以默认名称下载文件，或者只显示选项卡，如果支持的文件类型：图像，视频，音频文件......

如果需要更好的兼容性现在，请使用基于Flash的Downloadify 作为后备。

Answer 4

根据RFC 2397，不，没有。

~~您也可以使用<a>元素的任何attribute。~~

然而，HTML5随后在<a>元素上引入了download属性，尽管在撰写本文时，支持不是通用的（例如，没有MSIE支持）

Answer 5

我看了一下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

Answer 6

以下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")

Answer 7

没有

整个目的是它是一个数据流，而不是一个文件。数据源不应该知道用户代理将其作为文件处理......而它不会。

Answer 8

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

样品：

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

Answer 9

看看这个链接： http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

引用：

它甚至可以起作用（如同，不会引起问题）;最后是base64   像这样（至少在Opera中）：

数据：文本/无格式;字符集= UTF-8;标头=内容处置％3A％20attachment％3B％20filename％3D％22with％20spaces.txt％22％0D％0AContent语言％3A％ 20en; base64,4oiaDQo％3D

在讨论的其余信息中也有一些信息。

Answer 10

使用service workers，这最终可能是最真实的。

创建虚假网址。例如/saveAs/myPrettyName.jpg
在<a href, <img src，window.open（url）中使用网址，绝对可以通过“真实”网址完成任何操作。
在工作人员内部，捕获获取事件，并使用正确的数据进行响应。

即使用户在新标签页中打开文件，浏览器也会建议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 );
    }
});

Answer 11

Google Code上有一个很小的解决方法脚本对我有用：

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

它添加一个包含数据的表单，提交它然后再次删除表单。哈基，但它为我完成了这项工作。需要jQuery。

这个帖子在谷歌代码页面之前出现在谷歌中，我认为在这里也可以提供链接。

Answer 12

这是一个基于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();

Answer 13

这是一种hackish，但我之前一直处于同样的境地。我在javascript中动态生成一个文本文件，并希望通过使用data-URI对其进行编码来提供下载。

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

首先使用flash将名称复制到剪贴板中可以减轻这种痛苦。当然，如果你让自己使用Flash或Java（我认为现在浏览器支持越来越少？），你可能会找到另一种方法来实现这一点。

Answer 14

这个适用于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 的文件以供下载。诀窍是使用文件而不是 Blob 。

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

Answer 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 () { });
    }

Answer 16

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

但是 <img src=.. download=.. > 不适用于右键单击 -> 将图像另存为..，建议使用“Download.jped”。

如果将两者结合起来：<a href=.. download=..><img src=..></a>

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

您必须将数据 uri 写入两次（href 和 src），因此对于大型图像文件，最好使用 javascript 复制 uri。

使用 Chrome/Edge 88 测试

Answer 17

你实际上可以在Chrome和FireFox中实现这一目标。

尝试以下网址，它会下载使用过的代码。

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==

有没有办法在使用数据时指定建议的文件名：URI？

17 个答案: