下载多个选定的文件angular 7

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FileDownloadService {
  constructor(private http: HttpClient) { }

  downloadFiles(fileUrls: string[]): Observable<any> {
    const requests: Observable<any>[] = [];

    fileUrls.forEach(url => {
      const request = this.http.get(url, { observe: 'events', responseType: 'blob' }).pipe(
        map(event => {
          if (event.type === HttpEventType.DownloadProgress) {
            const progress = Math.round(100 * event.loaded / event.total);
            return { type: 'progress', progress };
          } else if (event instanceof HttpResponse) {
            return { type: 'success', data: event.body };
          }
        })
      );

      requests.push(request);
    });

    return forkJoin(requests);
  }
}

import { Component } from '@angular/core';
import { FileDownloadService } from './file-download.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="downloadFiles()">下载文件</button>
  `
})
export class AppComponent {
  constructor(private fileDownloadService: FileDownloadService) { }

  downloadFiles() {
    const fileUrls = ['file1-url', 'file2-url', 'file3-url'];

    this.fileDownloadService.downloadFiles(fileUrls).subscribe(
      event => {
        if (event.type === 'progress') {
          console.log(`下载进度：${event.progress}%`);
        } else if (event.type === 'success') {
          // 处理下载成功的文件数据
          console.log('文件下载成功');
        }
      },
      error => {
        console.error('文件下载失败', error);
      }
    );
  }
}