Angular中如何将项目assets文件夹内的文件打包为zip下载

可行性说明 #

该需求完全可以实现，前端通过JSZip库打包资源，结合file-saver触发浏览器下载即可。仅需要注意：浏览器端没有权限直接遍历服务器目录，需要提前维护一份assets下的资源路径清单。

具体操作步骤 #

1. 安装依赖库 #

执行以下npm命令安装打包和下载所需的工具库：

npm install jszip file-saver
# TypeScript项目需要额外安装类型声明
npm install @types/jszip @types/file-saver --save-dev

2. 生成资源清单文件 #

在src/assets目录下新建assets-list.json，列出所有需要打包的资源相对路径（相对于assets根目录），示例格式：

{
  "files": [
    "images/banner.png",
    "images/avatar.jpg",
    "videos/demo.mp4",
    "icons/menu.svg"
  ]
}

如果资源数量多，可写一个简单的Node.js脚本遍历assets目录自动生成该清单，无需手动维护。

3. 编写组件逻辑 #

首先在对应组件中导入依赖并注入HttpClient：

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

@Component({
  selector: 'app-asset-download',
  templateUrl: './asset-download.component.html',
  styleUrls: ['./asset-download.component.css']
})
export class AssetDownloadComponent {
  isLoading = false;

  constructor(private http: HttpClient) {}

  downloadAssetsZip() {
    this.isLoading = true;
    const zip = new JSZip();
    const downloadPromises: Promise<void>[] = [];

    // 先请求资源清单
    this.http.get<{files: string[]}>('/assets/assets-list.json').subscribe({
      next: (res) => {
        // 逐个加载资源并加入zip
        res.files.forEach(filePath => {
          const promise = this.http.get(`/assets/${filePath}`, { responseType: 'blob' })
            .toPromise()
            .then(blob => {
              // 保持原目录结构存入zip
              zip.file(filePath, blob);
            });
          downloadPromises.push(promise);
        });

        // 所有资源加载完成后生成并下载zip
        Promise.all(downloadPromises).then(() => {
          zip.generateAsync({ type: 'blob' }).then(content => {
            saveAs(content, 'assets-resources.zip');
            this.isLoading = false;
          });
        }).catch(err => {
          console.error('资源加载失败', err);
          this.isLoading = false;
        });
      },
      error: (err) => {
        console.error('资源清单加载失败', err);
        this.isLoading = false;
      }
    })
  }
}

4. 页面添加触发按钮 #

在组件模板中添加下载按钮，绑定点击事件即可：

<button (click)="downloadAssetsZip()" [disabled]="isLoading">
  {{ isLoading ? '打包中...' : '下载全部资源' }}
</button>

注意事项 #

• 单文件大小超过50M、总资源超过200M的场景，不建议用前端打包，容易导致页面卡顿，建议走后端生成下载链接的方案
• 如果资源需要动态更新，可在Angular构建阶段通过钩子自动更新assets-list.json，无需手动修改
• 打包过程中添加loading状态禁止重复点击，避免重复请求资源

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