JavaScript实现多文件下载方法解析

JavaScript实现多文件下载方法解析

在前端开发中，我们可能会遇到需要同时下载多个文件的场景。如果只是下载单个文件，直接使用a标签即可；但是如果需要同时下载多个文件，就需要使用JavaScript来实现了。

1. 使用for循环下载多个文件

首先，我们可以通过for循环来实现多个文件的下载。下面是代码示例：

function downloadFiles(files) {
  for (let i = 0; i < files.length; i++) {
    let link = document.createElement("a"); //创建a标签
    link.href = files[i]; //设置下载路径
    link.download = files[i].split("/").pop(); //设置文件名称
    link.click(); //模拟点击下载
  }
}

let files = [
  "http://example.com/file1.pdf",
  "http://example.com/file2.jpg",
  "http://example.com/file3.txt"
];

downloadFiles(files);

在这个示例中，我们首先编写了一个downloadFiles函数来下载多个文件，然后通过for循环遍历文件列表，创建a标签并设置文件的下载路径和名称，并通过模拟点击下载按钮来实现文件下载。

2. 使用Promise.all下载多个文件

除了使用for循环外，我们也可以使用Promise.all来实现多个文件的下载。下面是代码示例：

function downloadFile(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    }
    xhr.send();
  });
}

function downloadFiles(files) {
  let promises = [];
  for (let i = 0; i < files.length; i++) {
    promises.push(downloadFile(files[i]));
  }
  Promise.all(promises).then(values => {
    for (let i = 0; i < values.length; i++) {
      let a = document.createElement("a");
      a.href = URL.createObjectURL(values[i]);
      a.download = files[i].split("/").pop();
      a.click();
    }
  });
}

let files = [
  "http://example.com/file1.pdf",
  "http://example.com/file2.jpg",
  "http://example.com/file3.txt"
];

downloadFiles(files);

在这个示例中，我们定义了一个downloadFile函数来下载单个文件，并且通过Promise来包裹xmlhttprequest请求，方便异步处理。然后我们通过for循环，遍历所有的文件，将每一个文件下载的promise放到一个数组中，并使用Promise.all等待所有promise都执行完毕，并将所有下载完成的文件存储在一个值数组中。最后通过循环，创建a标签并设置下载链接和文件名称，模拟点击下载按钮来实现文件下载。

总结

以上我们介绍了两种通过JavaScript实现多文件下载的方法，第一种方式适用于文件较少的情况，而第二种方式则适用于文件数量较多的情况。但需要注意的是，下载的文件存在于浏览器的下载文件夹中，而不是我们自己的web服务器上。同时，对于不同的浏览器，下载的文件名可能会有所不同，需要根据具体情况进行处理。