Angular实现从本地文件夹批量下载文件并打包为Zip的方法

1. 安装依赖 #

首先安装两个核心库及对应TypeScript类型定义：

npm install jszip file-saver @types/jszip @types/file-saver --save

2. 组件代码实现 #

在你的Angular组件中编写完整下载逻辑：

import { Component } from '@angular/core';
import * as JSZip from 'jszip';
import { saveAs } from 'file-saver';

@Component({
  selector: 'app-zip-download',
  template: `<button (click)="downloadFolderAsZip()">下载文件夹为Zip</button>`
})
export class ZipDownloadComponent {
  // 替换为你的实际文件列表（name为Zip内显示的文件名，url为文件接口地址）
  private fileList = [
    { name: '项目报告.pdf', url: '/api/files/report.pdf' },
    { name: '界面截图.png', url: '/api/files/screenshot.png' },
    { name: '统计数据.csv', url: '/api/files/data.csv' }
  ];

  async downloadFolderAsZip() {
    const zip = new JSZip();
    // 在Zip包内创建一个文件夹（可选，也可直接将文件放在Zip根目录）
    const zipFolder = zip.folder('我的下载文件夹');

    // 遍历文件列表，逐个获取Blob并添加到Zip
    for (const file of this.fileList) {
      try {
        const response = await fetch(file.url);
        if (!response.ok) throw new Error(`获取文件 ${file.name} 失败`);
        const fileBlob = await response.blob();
        
        // 将文件添加到Zip文件夹
        zipFolder?.file(file.name, fileBlob);
      } catch (err) {
        console.error(`处理文件 ${file.name} 出错:`, err);
      }
    }

    // 生成Zip包并触发浏览器下载
    try {
      const zipBlob = await zip.generateAsync({ type: 'blob' });
      saveAs(zipBlob, '文件夹打包.zip');
    } catch (err) {
      console.error('生成Zip包失败:', err);
    }
  }
}

3. 关键细节说明 #

• 本地文件适配：如果是前端本地的用户上传文件（File对象），可直接跳过fetch步骤，用zipFolder?.file(file.name, file)直接添加。
• 跨域处理：若后端API与前端域名不同，需在后端配置CORS允许跨域，或在Angular中配置代理文件（proxy.conf.json）规避CORS错误。
• 体验优化：文件数量多/体积大时，可添加loading状态（比如设置isLoading变量控制模板内加载动画显示）。
• 后端要求：确保后端返回文件时设置了正确的Content-Type响应头，避免文件损坏。

内容的提问来源于stack exchange，提问作者Al Amin Suzan