Question

下载chrome，edge和IE中的多个blob似乎不是问题，但是在Firefox上，我遇到的问题是，大多数情况下，只有最后一个文件或max。其中2个将被“下载”。我搜索了一个“下载blob”代码，并对其进行了修改，使其可以一次下载更多，并且该问题在Windows 10上最新的Firefox版本的机器上可重现，请参见下面的Firefox JS代码。

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);
saveData(data, fileName + 1);
saveData(data, fileName + 2);
saveData(data, fileName + 3);
saveData(data, fileName + 4);
saveData(data, fileName + 5);
saveData(data, fileName + 6);
saveData(data, fileName + 7);

似乎可以进行以下更改，但问题是什么是真正的专业解决方案？

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);
setTimeout(function(){ saveData(data, fileName + 0) }, 1000);
setTimeout(function(){ saveData(data, fileName + 1) }, 2000);
setTimeout(function(){ saveData(data, fileName + 2) }, 3000);

对于这么多文件，它也可以使用1,2,3ms作为参数，但是文件更多时，它以100ms开始工作，浏览器将“吞噬”掉一些文件。

我想是浏览器在其“合并”点击或加载事件下有一个休止符，现在的问题是每个浏览器的休止符是什么，还有没有比我目前的方法更好的解决方案？

Answer 1

您要尝试做的就是“地毯炸弹”。

它包括用大量文件填充用户磁盘，直到空间用尽。
就其本身而言，即使它可能导致系统崩溃，安全风险也很低，比任何危险都更无聊。
但是，在某些情况下，它可能导致无法预料的缺陷，例如"Safari carpet-bomb" attack就是这种情况。
也许更重要的是，将大量的文件以及其他不相关的文件堆积在downloads文件夹中，这几乎不是一个好的UX。

因此，浏览器实际上是quite open来篡改此问题，并且大多数浏览器都具有适当的系统来避免此问题。

现在，这些篡改系统可能有很多解决方法，但我认为这不是您所需要的。

您问“ 是否有比您当前的方法更好的解决方案”，答案是肯定的。

如果您一次单击即可下载所有文件，则将它们打包为一个文件进行下载。

您可以通过使用许多zipping库之一甚至所有其他压缩算法（取决于目标客户端）从所有Blob生成zip文件来实现此目的。

const blobs = "This is a sample text that will get split in chunks of separate text files"
  .split(' ')
  .map((txt) => new Blob([txt])); 

const zip = new JSZip();
const folder = zip.folder('some-words');

blobs.forEach((blob, i) =>
  folder.file(`a-word_${i}.txt`, blob)
);

zip.generateAsync({type : "blob"})
  .then(zip_blob => {
    dl.href = URL.createObjectURL(zip_blob);
    dl.download = "myfiles.zip";
  });

<!-- using JSZip library https://stuk.github.io/jszip/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<a id="dl">download</a>

Firefox无法一次下载多个文件吗？

1 个答案: