下载数据url文件

Question

我正在玩一个完全基于javascript的zip/unzip实用程序的想法,任何人都可以从浏览器访问.他们可以直接将他们的zip拖到浏览器中,然后让他们下载所有文件.他们还可以通过拖动单个文件来创建新的zip文件.

我知道在服务器端做它会更好,但这个项目只是为了一点乐趣.

如果我利用各种可用方法,将文件拖入浏览器应该很容易.(gmail风格)

编码/解码应该没问题.我见过一些as3 zip库,所以我相信我应该没问题.

我的问题是最后下载文件..

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 

这在firefox中运行良好,但在chrome中不行.

我可以将文件嵌入到chrome中使用的图像<img src="data:jpg/image;ba.." />,但文件不一定是图像.它们可以是任何格式.

任何人都可以想到另一种解决方案或某种解决方法吗？

Answer 1

如果您还想为文件提供建议的名称(而不是默认的"下载"),您可以在Chrome,Firefox和某些IE版本中使用以下内容:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

以下示例显示了它的用法:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

Answer 2

思路:

• 试试<a href="data:...." target="_blank">(未经测试)

• 使用downloadify而不是数据URL(也适用于IE)

Answer 3

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

Answer 4

想要分享我的经验,并帮助有人坚持下载不在Firefox下工作并更新到2014年的答案.下面的代码片段将在firefox和chrome中工作,它将接受一个文件名:

  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);

Answer 5

这是我在Firefox和Chrome中测试的纯JavaScript解决方案,但在Internet Explorer中没有:

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

到目前为止发现的跨浏览器解决方案:

downloadify - >需要Flash

数据绑定 - >在IE 10和11中测试过,对我不起作用.需要servlet和一些自定义.(错误地检测导航器.我必须在兼容模式下设置IE以进行测试,在servlet中设置默认字符集,使用正确的servlet路径的JavaScript选项对象进行绝对路径...)对于非IE浏览器,它会在同一窗口中打开文件.

download.js - > http://danml.com/download.html另一个类似但未经过测试的库.声称是纯JavaScript,不需要servlet或Flash,但不适用于IE <= 9.

Answer 6

有几种解决方案,但它们依赖于HTML5,尚未在某些浏览器中完全实现.下面的示例在Chrome和Firefox中进行了测试(部分工作).

1. 具有保存到文件支持的Canvas示例.只需将您设置document.location.href为数据URI即可.
2. 主播下载示例.它用于<a href="your-data-uri" download="filename.txt">指定文件名.

Answer 7

结合@owencm和@ Chazt3n的答案,此功能将允许从IE11,Firefox和Chrome下载文本.(对不起,我无法访问Safari或Opera,但如果您尝试并且有效,请添加评论.)

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');

Answer 8

仅用 HTML 就可以 100% 完全解决这个问题。 只需将href属性设置为"data:(mimetypeheader),(url)". 例如...

<a
    href="data:video/mp4,http://www.example.com/video.mp4"
    target="_blank"
    download="video.mp4"
>Download Video</a>

工作示例：JSFiddle 演示。

因为我们使用数据 URL，所以我们可以设置 mimetype 来指示要下载的数据类型。文档：

数据 URL 由四部分组成：前缀 (data:)、指示数据类型的 MIME 类型、可选的 base64 令牌（如果非文本）以及数据本身。（来源：MDN Web 文档：数据 URL。）

成分：

• <a ...>: 链接标签。
• href="data:video/mp4,http://www.example.com/video.mp4"：这里我们设置指向 a 的链接data:，其标头预先配置为video/mp4。接下来是标头 mimetype。IE，对于.txt文件来说，它将是text/plain. 然后用逗号将其与我们要下载的链接分隔开。
• target="_blank"：这表示应该打开一个新选项卡，这不是必需的，但它有助于引导浏览器达到所需的行为。
• download：这是您正在下载的文件的名称。

Answer 9

If you only need to actually have a download action, like if you bind it to some button that will generate the URL on the fly when clicked (in Vue or React for example), you can do something as easy as this:

const link = document.createElement('a')
link.href = url
link.click()

In my case, the file is already properly named but you can set it thanks to filename if needed.