下载数据网址文件

javascript data-uri

2022-08-30 02:08:21

我正在考虑制作一个完全基于JavaScript的zip/解压缩实用程序，任何人都可以从浏览器访问。他们可以直接将他们的zip拖到浏览器中，这将让他们下载其中的所有文件。他们还可以通过拖动单个文件来创建新的 zip 文件。

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

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

编码/解码应该没问题。我已经看到了一些as3 zip库，所以我确信我应该没问题。

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

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

这在Firefox中工作正常，但在Chrome中则不然。

我可以使用在chrome中将文件作为图像嵌入，但文件不一定是图像。它们可以是任何格式。<img src="data:jpg/image;ba.." />

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

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

答案 2

function download(dataurl, filename) {
  const link = document.createElement("a");
  link.href = dataurl;
  link.download = filename;
  link.click();
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

艺术

function download(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.click();
  })
  .catch(console.error);
}

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