javascript - 浏览器正在取消多个文件下载请求

Question

我正在尝试下载用户选择下载的多个文件。但是，浏览器正在取消除最后一次下载请求之外的所有下载请求。如果我将请求之间的延迟增加到大约 1 秒，那么这些文件就会被下载，但即使在这种情况下，有时也会丢失一些文件。这些文件是从亚马逊 s3 url 下载的(即这些是 CORS)。

我通过使用 url 创建一个 anchor 元素，然后使用 javascript 调用它的点击事件来完成此操作。

downloadFile(url) {
    let a = document.createElement('a');
    a.id = url;
    // a.setAttribute('target', 'blank');
    a.download = '';
    a.href = url;
    // firefox doesn't support `a.click()`...
    // console.log('dowmloading ' + url);
    a.dispatchEvent(new MouseEvent('click'));
    a.remove();
}

然后在下载按钮点击事件上我正在这样做:

let delay = 0;
        urlList.forEach(url => {
            return setTimeout(downloadFile.bind(null, url), 100 * ++delay);
        });

有办法实现这一点吗？

为什么浏览器取消请求？

Answer 1

Why is the browser cancelling the requests?

因为在浏览器完全完成您单击上一个链接时必须执行的操作之前，您实际上是通过单击下一个链接来“取消导航”。

如果这不是下载，而是页面的常规链接，那么这就是您想要的行为 - 如果用户首先单击页面 A 的链接，但随后失去耐心并单击另一个页面链接到页面 B，那么对页面 A 的请求此时就会被取消 - 无需加载两个资源，因为无论如何只能同时显示一个资源。

如果您不想找出一个超时的“神奇数字”以某种方式使其“起作用”，我认为您对此无能为力 - 特别是因为您不知道这是否有效一般情况下都可以工作，或者可能只在您的机器上，通过您的互联网连接等工作。

I am trying to download multiple files that the user has selected for download.

您可以将这些选定的文件动态包装到服务器上，例如 ZIP(严格来说，不仅仅是一个“容器”)，以便用户只需下载一个/em> 仅文件(然后他们必须在自己的计算机上再次解压该文件。)

或者您首先更改文件选择过程。与其让用户使用复选框或类似的东西标记他们想要的文件，不如向他们提供指向文件的直接链接？然后他们可以依次单击他们想要的每一个，然后就会发生“正常”下载功能。