Question

我正在玩一个完全基于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中找到的图像，但文件不一定是图像。它们可以是任何格式。

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

Answer 1

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

Answer 2

思路：

尝试<a href="data:...." target="_blank">（未经测试）
使用downloadify代替数据网址（也适用于IE）

Answer 3

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

Answer 4

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
  return false;
}

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");

Answer 5

有几种解决方案，但它们依赖于HTML5，尚未在某些浏览器中完全实现。下面的示例在Chrome和Firefox中进行了测试（部分工作）。

Canvas example并保存到文件支持。只需将document.location.href设置为数据URI。
Anchor download example。它使用<a href="your-data-uri" download="filename.txt">指定文件名。

Answer 6

这是我在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 - ＆gt;需要Flash

databounce - ＆gt;在IE 10和11中测试过，对我来说不起作用。需要servlet和一些自定义。（错误地检测导航器。我必须在兼容模式下设置IE进行测试，在servlet中设置默认字符集，使用正确的servlet路径的JavaScript选项对象进行绝对路径...）对于非IE浏览器，它会在同一窗口中打开文件。

download.js - ＆gt; http://danml.com/download.html另一个类似但未经过测试的库。声称是纯JavaScript，不需要servlet或Flash，但不适用于IE＆lt; = 9。

Answer 7

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

Answer 8

这可以 100% 完全单独使用 HTML 解决。只需将 href 属性设置为 "data:(mimetypeheader),(url)"。例如...

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

工作示例：JSFiddle Demo。

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

<块引用>

数据 URL 由四部分组成：前缀 (data:)、指示数据类型的 MIME 类型、可选的 base64 标记（如果非文本）以及数据本身。（来源：MDN Web Docs: Data URLs。）

组件：

<a ...> ：链接标签。
href="data:video/mp4,http://www.example.com/video.mp4" ：这里我们设置了指向 data: 的链接，标头预配置为 video/mp4。紧随其后的是标题 mimetype。即，对于 .txt 文件，它将是 text/plain。然后用逗号将它与我们要下载的链接分开。
target="_blank" ：这表示应该打开一个新选项卡，这不是必需的，但它有助于引导浏览器达到所需的行为。
download：这是您要下载的文件的名称。

Answer 9

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

Answer 10

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

请在这里向Yetti投票： 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");

Answer 11

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

您可以尝试一种解决方法并从Flash对象提供解压缩的文件，但之后您将失去仅JS的纯度（无论如何，我不确定您当前是否可以“将文件拖入浏览器”而无需某种排序Flash解决方法 - 可能是HTML5功能吗？）

Answer 12

如果您只需要实际进行下载操作，例如将其绑定到某个按钮，该按钮将在单击时即时生成 URL（例如在 Vue 或 React 中），您可以执行以下操作：

const link = document.createElement('a')
link.href = url
link.click()

就我而言，该文件已正确命名，但如果需要，您可以通过 filename 对其进行设置。

Answer 13

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();
};

下载数据url文件

13 个答案: