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

例如，如果你点击链接:

数据:应用程序/八进制;base64 SGVsbG8 =

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

当前回答

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

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

2016-01-02 18:51:46

其他回答

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

2013-04-05 11:19:07

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

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

这在轻微的用户干预下是可能的。生成一个链接<a href="data:…">右键单击我并选择“Save Link As…”并保存为“example.txt”</a>. txt”。正如我所说，这是不优雅的，但如果你不需要专业的解决方案，它是可行的。

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

2011-05-30 00:18:06

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

创建一个假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 );
    }
});

2015-01-24 10:56:59

仅限HTML:使用download属性:

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">下载透明png</a> .gif

仅Javascript:你可以用这段代码保存任何数据URI:

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

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

2014-09-08 00:22:41

Chrome使这非常简单:

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

2013-05-13 13:23:35

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

推荐文章

最新文章

标签