下载数据url文件

思想:

• 试一试 <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");

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

或:

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

想分享我的经验,并帮助一些人坚持下载不在火狐工作,并更新了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);

下面是一个纯JavaScript解决方案,我在Firefox和Chrome中测试过,但在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;
}

下载->需要闪存

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

http://danml.com/download.html 另一个类似但未经测试的库。声称是纯JavaScript,不需要servlet或Flash,但在IE<=9上不起作用。

1. Canvas example 支持保存到文件。把你的 document.location.href
2. Anchor download example . 它使用 <a href="your-data-uri" download="filename.txt">

结合@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');

对于IE中有问题的人:

saving canvas locally in 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");

你的问题本质上归结为“不是所有的浏览器都支持这个”。

你可以尝试一个解决方案,并提供从Flash对象中解压的文件,但这样你就失去了JS的纯粹性(无论如何,我不确定你现在是否可以“将文件拖到浏览器中”而不需要某种Flash解决方案——这可能是HTML5的功能吗?)