绝对高效！揭秘前端一次性批量下载多个文件的三大方案

2023-11-09 09:49:44

一次性批量下载多个文件的三大方案：总有一款适合你！

在纷繁复杂的数字世界中，我们经常需要一次性下载多个文件。无论是图像、视频还是文档，大批量下载都让我们倍感头疼。本篇文章将介绍三种高效实用的批量下载方案，帮助你轻松应对这一难题。

方案一：setTimeout逐个下载

此方案以其简单易用和广泛兼容性著称。它使用setTimeout函数，每隔一定时间发送一个下载请求。优点在于代码简洁、浏览器兼容性好，但缺点在于下载速度相对较慢，需逐个下载文件。

代码示例：

function downloadFiles(urls) {
  const delay = 1000; // 1秒
  let index = 0;

  function downloadNextFile() {
    if (index < urls.length) {
      const url = urls[index++];
      const anchor = document.createElement('a');
      anchor.href = url;
      anchor.download = url.split('/').pop();
      anchor.click();

      setTimeout(downloadNextFile, delay);
    }
  }

  downloadNextFile();
}

方案二：Blob对象和window.URL.createObjectURL

此方案采用Blob对象和window.URL.createObjectURL，优势在于下载速度快，可并行下载多个文件。然而，其兼容性相对较差，仅适用于现代浏览器。

代码示例：

function downloadFiles(urls) {
  const blobs = [];

  urls.forEach(url => {
    fetch(url)
      .then(response => response.blob())
      .then(blob => {
        blobs.push(blob);
      });
  });

  const zip = new JSZip();
  blobs.forEach(blob => {
    zip.file(blob.name, blob);
  });

  zip.generateAsync({type: 'blob'})
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const anchor = document.createElement('a');
      anchor.href = url;
      anchor.download = 'files.zip';
      anchor.click();

      window.URL.revokeObjectURL(url);
    });
}

方案三：iframe实现批量下载

此方案借助iframe实现批量下载，其兼容性好，适用于所有浏览器。但缺点是易用性较差，需要编写较多的HTML和JavaScript代码。

HTML代码示例：

<iframe id="iframe" style="display: none;"></iframe>

JavaScript代码示例：

function downloadFiles(urls) {
  const iframe = document.getElementById('iframe');
  const doc = iframe.contentDocument;

  const form = doc.createElement('form');
  form.setAttribute('action', 'download.php');
  form.setAttribute('method', 'post');

  urls.forEach(url => {
    const input = doc.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', 'urls[]');
    input.setAttribute('value', url);
    form.appendChild(input);
  });

  doc.body.appendChild(form);
  form.submit();

  doc.body.removeChild(form);
}