当用户点击按钮时，我该如何让他们下载多个文件？

Question

当用户点击按钮时，我该如何让他们下载多个文件？

62

我有一个运行着的httpd服务器，其中包含许多文件的链接。假设用户从文件列表中选择了三个要下载的文件，它们位于：

mysite.com/file1 
mysite.com/file2
mysite.com/file3

当他们点击下载按钮时，我希望他们可以从上面的链接中下载这三个文件。

我的下载按钮大致长这样：

var downloadButton = new Ext.Button({
  text: "Download",
  handler: function(){
    //download the three files here
  }
});

- Grammin

1

如果你在手机上，zip 压缩文件就很糟糕。你可以触发三个下载，Chrome 甚至会识别并提示用户是否允许你的网站“下载多个文件”。如果你想使用 zip，你可以通过 ajax 获取文件，使用 JSZip 进行压缩，然后从生成的 JS 树对象中下载 zip 文件。 - dandavis

如何最好地触发下载？window.open("mysite.com/file1")是最佳方式吗？ - Grammin

我喜欢在可用的情况下使用 JavaScript 方法（例如 danml.com/js/download.js），或者<a download=file1.ext href=file1.ext>save</a>，它可以处理 dataURLs。虽然我通常不下载文件，而是使用 JavaScript 生成字符串，所以请将我的建议视作参考。 - dandavis

一个仅限于Chrome浏览器的API，文件系统访问 API，最近新增了多文件（流式）下载功能。 - tsh

这回答解决了您的问题吗？使用单个操作下载多个文件 - Flimm

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steven · Answer 1

另一种可能性是使用downloads.download() API。然而，这在Safari中不受支持。

await Promise.all(
  browser.downloads.download({url : downloadUrl1}),
  browser.downloads.download({url : downloadUrl2})
);

- Pramod Ukkali · Answer 2

downloadAll(links) {
  const urls = links;
  for (let link of urls) {
    window.open(link, '_blank');
  }
}

这段代码定义了一个downloadAll函数，它接受一个链接数组作为参数。然后，它遍历每个链接，并使用window.open(link, '_blank')在新的浏览器标签中打开它。这将触发每个链接的文件下载。

但是，请注意，要成功使用此方法下载文件，用户的浏览器设置必须允许弹出窗口。如果启用了弹出窗口阻止功能，则文件可能无法按预期下载。

请记住，此解决方案依赖于浏览器打开新标签和触发文件下载的默认行为。不同的浏览器可能处理方式不同，并不能保证所有文件都会同时下载。值得注意的是，如果您尝试下载大量文件，可能会导致性能问题或超出浏览器限制。

- amitbhargav0408 · Answer 3

您提供的代码是一个带有JavaScript/jQuery代码的HTML文档，尝试在点击"下载"链接时下载文件。然而，代码存在一些需要解决的问题。

首先，看起来您正在使用jQuery语法($('a.yourlink'))，但您没有在HTML文档中包含jQuery库。要使用jQuery，您需要通过在HTML的<head>部分添加以下行来引入jQuery库:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

其次，window.open()函数可以打开一个新的浏览器窗口或标签，并指定URL，但它不会启动文件下载。如果你想要下载一个文件，你可以动态创建一个锚点元素，并模拟点击事件。以下是你代码的更新版本：

<!DOCTYPE html>
<html>

<head>
    <title>Download File Using JavaScript/jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

<a href="#" class="yourlink">Download</a>

<script>
    $('a.yourlink').click(function(e) {
        e.preventDefault();
        var fileUrl = 'http://192.168.1.175/python-script/files-new.zip';
        var fileName = 'files-new.zip';

        var link = document.createElement('a');
        link.href = fileUrl;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });
</script>
</body>
</html>

在更新的代码中，当点击“下载”链接时，click事件处理程序使用e.preventDefault()阻止默认行为（导航到URL）。然后，它动态创建一个新的锚元素（<a>），并将href属性设置为文件URL，将download属性设置为所需的文件名。它将锚元素附加到文档主体，使用link.click()触发其上的点击事件，最后从文档中删除锚元素。

这种方法在点击链接时，在浏览器中触发文件下载，使用指定的URL和文件名。