Javascript 下载数据URL文件

我的想法是制作一个完全基于JavaScript的zip/unzip实用程序，任何人都可以从浏览器访问。他们只需将zip直接拖动到浏览器中，即可下载其中的所有文件。他们还可以通过拖动单个文件来创建新的zip文件

我知道最好在服务器端完成，但这个项目只是为了好玩

如果我充分利用各种可用的方法，将文件拖到浏览器中应该很容易。（Gmail风格）

编码/解码应该很好。我见过一些AS3ZIP库，所以我相信我应该可以接受

我的问题是最后下载文件

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

这在Firefox中运行良好，但在Chrome中不起作用

我可以使用

将文件作为图像嵌入到chrome中，但文件不一定是图像。它们可以是任何格式

有人能想出另一种解决方案或解决办法吗？

想法：

• 尝试使用

  而不是数据URL（同样适用于IE）
  

想法：
• 尝试使用

  而不是数据URL（同样适用于IE）
  

---

您的问题本质上归结为“并非所有浏览器都支持此功能”

---

你可以尝试一种变通方法，从Flash对象中提供解压文件，但这样你就会失去纯JS的纯度（无论如何，我不确定你目前是否可以在没有某种Flash变通方法的情况下“将文件拖到浏览器中”——这可能是HTML5的一个功能吗？
你的问题本质上归结为“并非所有浏览器都支持此功能”

---

您可以尝试一种变通方法，并从Flash对象提供解压缩文件，但这样您就失去了纯JS的纯净度（无论如何，我不确定您当前是否可以在没有某种Flash变通方法的情况下“将文件拖到浏览器中”——这可能是HTML5的功能吗？）
有几种解决方案，但它们依赖于HTML5，并且尚未在某些浏览器中完全实现。下面的示例在Chrome和Firefox中进行了测试（部分有效）
• 具有“保存到文件”支持。只需将

  document.location.href

  设置为数据URI
• 。它使用
  指定文件名

---

有几种解决方案，但它们依赖于HTML5，并且还没有在某些浏览器中完全实现。下面的示例在Chrome和Firefox中进行了测试（部分有效）
• 具有“保存到文件”支持。只需将

  document.location.href

  设置为数据URI
• 。它使用
  指定文件名

---

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

---

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

//构造元素
var link=document.createElement（“a”）；
link.download=文件名；
//构造uri
var uri='数据：text/csv；字符集=utf-8；base64，“+someb64数据
link.href=uri；
document.body.appendChild（链接）；
link.click（）；
//清理DOM
document.body.removeChild（link）；

想分享我的经验，帮助那些无法在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);

//构造元素
var link=document.createElement（“a”）；
link.download=文件名；
//构造uri
var uri='数据：text/csv；字符集=utf-8；base64，“+someb64数据
link.href=uri；
document.body.appendChild（链接）；
link.click（）；
//清理DOM
document.body.removeChild（link）；

这是我在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;
}

迄今为止发现的跨浏览器解决方案：
下载->需要闪存
databounce->在IE 10和11中测试过，对我不起作用。需要一个servlet和一些定制。（错误地检测导航器。我必须将IE设置为兼容模式以进行测试，servlet中的默认字符集，JavaScript选项对象的绝对路径具有正确的servlet路径…）对于非IE浏览器，它会在同一窗口中打开文件

---

download.js->另一个类似但未测试的库。声称是纯JavaScript，不需要servlet或Flash，但不适用于IE以下是我在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;
}

迄今为止发现的跨浏览器解决方案：
下载->需要闪存
databounce->在IE 10和11中测试过，对我不起作用。需要一个servlet和一些定制。（错误地检测导航器。我必须将IE设置为兼容模式以进行测试，servlet中的默认字符集，JavaScript选项对象的绝对路径具有正确的servlet路径…）对于非IE浏览器，它会在同一窗口中打开文件

---

download.js->另一个类似但未测试的库。声称是纯JavaScript，不需要servlet或Flash，但对于IE中存在问题的任何人来说，都不适用于IE：
请在这里投票给Yetti的答案：

dataURItoBlob=函数（dataURI）{
var binary=atob（dataURI.split（'，）[1]）；
var数组=[]；
对于（var i=0；i

对于IE中存在问题的任何人：
请你