Javascript 下载数据URL文件

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

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

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

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

我的问题是最后下载文件

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

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

我可以使用

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

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

想法：

• 尝试使用

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

---

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

---

您可以尝试一种变通方法，并从Flash对象提供解压缩文件，但这样您就失去了纯JS的纯净度（无论如何，我不确定您当前是否可以在没有某种Flash变通方法的情况下“将文件拖到浏览器中”——这可能是HTML5的功能吗？）
有几种解决方案，但它们依赖于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");

---

想分享我的经验，帮助那些在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中存在问题的任何人来说，都不适用于IE：
请在这里投票给Yetti的答案：

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

结合@owencm和@Chazt3n的答案，此功能将允许从IE11、Firefox和Chrome下载文本。（很抱歉，我没有Safari或Opera的访问权限，但如果您尝试使用，请添加评论。）

initiate\u user\u download=函数（文件名、mime类型、文本）{
//除了我什么都可以
if（未定义===window.navigator.msSaveOrOpenBlob）{
var e=document.createElement（'a'）；
var href='data:'+mime_type+'；charset=utf-8，'+encodeURIComponent（文本）；
e、 setAttribute（'href'，href）；
e、 setAttribute（“下载”，文件名）；
文件.正文.附件（e）；
e、 单击（）；
文件.body.removeChild（e）；
}
//IE特定代码
否则{
var charCodeArr=新数组（text.length）；
对于（变量i=0；i

函数下载（数据URL，文件名）{
var a=document.createElement（“a”）；
a、 href=dataurl；
a、 setAttribute（“下载”，文件名）；
a、 单击（）；
}
下载（“数据：text/html，HelloWorld！”，“HelloWorld.txt”）仅使用HTML就可以100%完全解决此问题。只需将
href
属性设置为
数据：（mimetypeheader），（url）
。例如

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



工作示例：

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

数据URL由四部分组成：前缀（数据：）、指示数据类型的MIME类型、可选的base64标记（如果不是文本标记）以及数据本身。（来源：）

组成部分：


：链接标签
href=“数据：视频/mp4，http://www.example.com/video.mp4“
：我们正在设置指向a
数据的链接：
，标题预配置为
视频/mp4
。然后是标头mimetype。也就是说，对于
.txt
文件，它将是
text/plain
。然后是
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');

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

export const downloadAs = async (url: string, name: string) => {
  const blob = await axios.get(url, {
    headers: {
      'Content-Type': 'application/octet-stream',
    },
    responseType: 'blob',
  });
  const a = document.createElement('a');
  const href = window.URL.createObjectURL(blob.data);
  a.href = href;
  a.download = name;
  a.click();
};