如何在Angular中创建点击时才从后端加载文件的可下载链接

问题场景 #

有一组文件列表，所有文件可通过后端以Blob形式获取。原方案是预下载所有文件并创建SafeResourceUrl，但多文件场景下会造成资源浪费，需要改为点击链接时才发起网络请求获取文件并触发下载。

修改后的实现代码 #

组件代码 #

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  // 文件列表，可从后端接口获取实际数据
  fileList = [
    { name: '测试文档1.pdf', url: '/api/files/test1.pdf' },
    { name: '测试文档2.pdf', url: '/api/files/test2.pdf' }
  ];

  constructor(private appService: AppService) {}

  // 点击触发文件下载
  async downloadFile(file: { name: string; url: string }): Promise<void> {
    try {
      const response = await this.appService.fetchFile(file.url).toPromise();
      const blob = response.body!;
      
      // 创建临时下载链接
      const downloadUrl = URL.createObjectURL(blob);
      const linkElement = document.createElement('a');
      linkElement.href = downloadUrl;
      linkElement.download = file.name;
      
      // 触发下载
      document.body.appendChild(linkElement);
      linkElement.click();
      
      // 清理临时资源，避免内存泄漏
      URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(linkElement);
    } catch (error) {
      console.error('文件下载失败:', error);
    }
  }
}

服务代码 #

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

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

  // 通用文件获取接口，支持任意文件地址
  fetchFile(fileUrl: string): Observable<HttpResponse<Blob>> {
    return this.http.get(fileUrl, {
      observe: 'response',
      responseType: 'blob',
    });
  }
}

HTML模板 #

<h1>文件下载列表</h1>
<div *ngFor="let file of fileList">
  <!-- 使用a标签模拟下载链接，阻止默认跳转 -->
  <a href="javascript:void(0)" (click)="downloadFile(file)">{{ file.name }}</a>
</div>

核心优化点 #

• 取消预下载：移除ngOnInit中的提前请求逻辑，仅在用户主动点击时发起网络请求，避免不必要的资源消耗。
• 通用化服务：将原单一PDF请求改为通用文件请求方法，适配多类型、多文件场景。
• 临时链接管理：通过URL.createObjectURL生成临时下载地址，下载完成后立即销毁该链接，防止内存泄漏。
• 多文件适配：通过数组管理文件列表，循环渲染下载入口，轻松扩展至任意数量的文件。

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