关于javascript：下载数据url文件


Download data url file

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

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

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

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

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

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

这在firefox中运行良好，但在chrome中不行。

我可以使用将文件嵌入到chrome中找到的图像，但文件不一定是图像。它们可以是任何格式。

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

相关讨论

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

1
2
3
4
5
6
7
8
9
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;
}

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

1
downloadURI("data:text/html,HelloWorld!","helloWorld.txt");
相关讨论

思路：

  • 尝试(未经测试)

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

相关讨论

1
2
3
4
5
6
7
8
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");

要么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!","helloWorld.txt");

相关讨论

想要分享我的经验，并帮助有人坚持下载不在Firefox中工作并更新到2014年的答案。
下面的代码片段可以在firefox和chrome中使用，它会接受一个文件名：

1
2
3
4
5
6
7
8
9
10
  // Construct the  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即可。
  • 主播下载示例。它使用指定文件名。
    • 相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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。

    相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    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
    1,2,3
    '    );

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

    对于在IE中遇到问题的任何人：

    请在这里由Yetti提出答案：
    在IE中本地保存画布

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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");

    您的问题基本归结为"并非所有浏览器都支持此功能"。

    您可以尝试一种解决方法并从Flash对象提供解压缩的文件，但之后您将失去仅JS的纯度(无论如何，我不确定您当前是否可以"将文件拖到浏览器中"而没有某种Flash解决方法 - 可能是HTML5功能吗？)