下载数据url文件

我正在玩一个完全基于javascript的zip / unzip实用程序的想法，任何人都可以从浏览器访问。他们可以直接将他们的zip拖到浏览器中，然后让他们下载所有文件。他们还可以通过拖动单个文件来创建新的zip文件。我知道在服务器端做它会更好，但这个项目只是为了一点乐趣。如果我利用各种可用方法，将文件拖入浏览器应该很容易。（gmail风格）编码/解码应该没问题。我见过一些as3 zip库，所以我相信我应该没问题。我的问题是最后下载文件..

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

这在firefox中运行良好，但在chrome中不行。我可以将文件嵌入使用<img src="data:jpg/image;ba.." />在chrome中找到的图像，但文件不一定是图像。它们可以是任何格式。任何人都可以想到另一种解决方案或某种解决方法吗？

已邀请:

11 个回复

磐去裸猜饲

思路：试试<a href="data:...." target="_blank">（未经测试）使用downloadify而不是数据URL（也适用于IE）

冉案

如果您还想为文件提供建议的名称（而不是默认的“下载”），您可以在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");

磐剩

想要分享我的经验，并帮助有人坚持下载不在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);

涸坍饺

有几种解决方案，但它们依赖于HTML5，尚未在某些浏览器中完全实现。下面的示例在Chrome和Firefox中进行了测试（部分工作）。具有保存到文件支持的Canvas示例。只需将document.location.href设置为数据URI即可。主播下载示例。它使用<a href="your-data-uri" download="filename.txt">指定文件名。

橙绥

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  var b = document.createEvent("MouseEvents");
  b.initEvent("click", false, true);
  a.dispatchEvent(b);
  return false;
}

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

旅牢斯讲

这是我在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＆lt; = 9。

董碘奴星

结合@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,Heren1,2,3n');

公藕

也可以通过JavaScript启动数据URL下载。有关此类解决方案，请参阅https://stackoverflow.com/a/13696029/271577（以及文本链接示例）。

徐百晴墓斜

您的问题基本归结为“并非所有浏览器都支持此功能”。您可以尝试一种解决方法并从Flash对象提供解压缩的文件，但之后您将失去仅JS的纯度（无论如何，我不确定您当前是否可以“将文件拖到浏览器中”而没有某种Flash解决方法 - 可能是HTML5功能吗？）

献导外拘

对于在IE中遇到问题的任何人：请在这里由Yetti提出答案：在IE中本地保存画布

dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

珊畴炮贩号

引用这个答案：下载该文件，然后将其作为base64提供给用户（以避免CORS问题）

$.get(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

这是IE 10 +，Chrome 8 +，FF 4+。请参阅https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL 它只会在Chrome，Firefox和Opera中下载该文件。这使用锚标记上的download属性来强制浏览器下载它。

要回复问题请先登录或注册

下载数据url文件

11 个回复

发起人

data_url

问题状态

下载数据url文件

与内容相关的链接

11 个回复

发起人

data_url

问题状态