如何在JS中批量下载文件并打包为文件夹？

浏览器本身没有权限直接指定文件的下载路径，也没法强制让多个独立下载的文件自动进入同一个文件夹。要实现「一次性下载到同一文件夹」的效果，最靠谱的方式是把所有文件打包成一个ZIP压缩包，用户下载这个ZIP后，解压就能得到同一文件夹下的所有文件。

下面是基于你现有代码的实现方案，用到JSZip库来处理压缩打包：

步骤1：引入JSZip #

先安装JSZip依赖（项目环境）：

npm install jszip

或者通过CDN引入（纯前端页面场景）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

步骤2：编写批量下载函数 #

基于你原有的downloadFile逻辑，扩展出批量打包下载的函数：

import JSZip from 'jszip'; // 项目环境需要导入，CDN引入则无需这行

export async function downloadFilesToFolder(fileList: {url: string, filename: string}[], folderName: string) {
  const zip = new JSZip();
  const folder = zip.folder(folderName); // 创建ZIP内的目标文件夹

  // 遍历文件列表，逐个获取并添加到ZIP文件夹中
  for (const file of fileList) {
    const res = await fetch(file.url);
    const blob = await res.blob();
    folder?.file(`${file.filename}.pdf`, blob); // 将文件存入ZIP内的指定文件夹
  }

  // 生成ZIP压缩包的Blob对象
  const zipBlob = await zip.generateAsync({type: 'blob'});
  const zipUrl = window.URL.createObjectURL(zipBlob);

  // 触发ZIP包的下载
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = zipUrl;
  a.download = `${folderName}.zip`; // 下载后的ZIP文件名

  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

  // 清理URL对象，避免内存泄漏
  window.URL.revokeObjectURL(zipUrl);
}

使用示例 #

调用函数时，传入文件列表和目标文件夹名称即可：

// 示例文件列表
const files = [
  {url: 'https://example.com/file1.pdf', filename: '文件1'},
  {url: 'https://example.com/file2.pdf', filename: '文件2'},
  {url: 'https://example.com/file3.pdf', filename: '文件3'},
];

// 批量下载到名为「我的PDF文档」的文件夹（实际是ZIP包内的文件夹）
downloadFilesToFolder(files, '我的PDF文档');

注意事项 #

• 要确保所有文件的URL支持跨域请求（CORS），否则fetch会失败；同域文件则无此限制。
• 若文件体积较大，批量打包会占用较多浏览器内存，建议控制单次下载的文件数量。

内容的提问来源于stack exchange，提问作者Berry