JS实现单个或多个文件批量下载的方法详解

背景介绍

在一些实际的应用中，我们可能需要从一个页面上下载多个文件，如果每个文件都需要手动单独下载，那么效率低下且非常耗时。本文将介绍如何使用JavaScript实现批量下载文件，帮助用户提高工作效率。

方法分析

一、使用a标签下载单个文件

实现单个文件下载最常见的方法就是通过a标签来实现。首先我们在页面上添加一个a标签，然后通过JavaScript修改该标签的href属性为我们要下载的文件路径，然后再触发a标签的click事件即可。

function downloadFile(url) {
  const link = document.createElement('a');
  link.href = url;
  link.download = url.split('/').pop();
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

通过该函数，我们可以将任何一个文件下载到本地。

二、使用XMLHttpRequest对象下载单个文件

使用XMLHttpRequest对象可以实现更为灵活的文件下载。通过该对象，我们可以实现设置请求头、下载进度监测、文件断点续传等功能。下面是一个简单的示例：

function downloadFile(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (this.status === 200) {
      const url = window.URL.createObjectURL(this.response);
      const a = document.createElement('a');

      a.href = url;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }
  };
  xhr.send();
}

该函数通过ajax的方式，请求后端服务器，并且通过Blob对象创建文件下载链接，最后实现文件下载。

三、批量下载多个文件

批量下载多个文件，一种常见的方法是将多个文件打包成zip文件进行下载。因此，我们可以使用JSZip库（一个轻量级的JavaScript库，用于生成.zip文件）实现多文件下载。

<button id="downloadBtn">点击下载Zip</button>

const downloadBtn = document.getElementById('downloadBtn');
downloadBtn.addEventListener('click', function() {
  const zip = new JSZip();

  const file1 = 'file1.txt';
  const file2 = 'file2.txt';

  const files = [
    { name: 'file1.txt', url: '/path/to/file1.txt'},
    { name: 'file2.txt', url: '/path/to/file2.txt'}
  ];

  files.forEach(function(file) {
    JSZipUtils.getBinaryContent(file.url, function(err, data) {
      if (err) {
        throw err;
      }

      zip.file(file.name, data, { binary: true });
      if (zip.files.length === files.length) {
        zip.generateAsync({ type: 'blob' })
          .then(function(content) {
            const a = document.createElement('a');
            a.href = URL.createObjectURL(content);
            a.download = 'files.zip';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          });
      }
    })
  })
})

该函数通过JSZip库和JSZipUtils库，将多个文件通过二进制的方式存入一个zip包中，最后进行下载。

示例说明

一、单个文件下载

用户需要单独下载一个名为“example.zip”的文件。首先，我们需要提供该文件的下载链接，在页面上添加一个下载按钮，然后绑定事件。

<button id="downloadButton">下载文件</button>

const downloadButton = document.getElementById('downloadButton');
downloadButton.onclick = function() {
  downloadFile('/path/to/example.zip');
}

实现效果：

用户点击下载按钮后，文件会开始下载至本地。

二、批量下载多个文件

用户需要批量下载多个文件，如“file1.txt”和“file2.txt”。我们可以通过实现“三、批量下载多个文件”的方法，将多个文件打包成zip进行下载。

<button id="downloadBtn">点击下载Zip</button>

const downloadBtn = document.getElementById('downloadBtn');
downloadBtn.addEventListener('click', function() {
  const zip = new JSZip();

  const file1 = 'file1.txt';
  const file2 = 'file2.txt';

  const files = [
    { name: 'file1.txt', url: '/path/to/file1.txt'},
    { name: 'file2.txt', url: '/path/to/file2.txt'}
  ];

  files.forEach(function(file) {
    JSZipUtils.getBinaryContent(file.url, function(err, data) {
      if (err) {
        throw err;
      }

      zip.file(file.name, data, { binary: true });
      if (zip.files.length === files.length) {
        zip.generateAsync({ type: 'blob' })
          .then(function(content) {
            const a = document.createElement('a');
            a.href = URL.createObjectURL(content);
            a.download = 'files.zip';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          });
      }
    })
  })
})

实现效果：

用户点击下载按钮后，多个文件会被打包成zip下载至本地。