Angular 9中点击链接实现已上传文件下载的方法

嘿，作为刚接触Angular的新手，你已经搞定了文件上传和列表展示，接下来实现点击下载其实没那么复杂～我给你分两种最常见的场景来讲解，你可以根据自己的后端情况选合适的方案：

场景1：后端返回了可直接访问的文件下载URL #

如果你的后端在文件上传成功后，返回了一个可以直接访问的下载地址（比如document.Document?.downloadUrl这类字段），那直接利用HTML原生的download属性就能快速实现：

<ng-container *ngFor="let document of searchVideoConsultation.TmpDocument">
  <div class="ui-g form-group">
    <div class="ui-g-12 ui-md-9">
      <!-- 绑定下载URL，用download属性指定保存的文件名 -->
      <a 
        [href]="document.Document?.downloadUrl" 
        [download]="document.Document?.Name"
        target="_blank"
      >
        {{document.Document?.Name}}
      </a>
    </div>
  </div>
</ng-container>

小提醒： #

• 要确保这个downloadUrl是浏览器能直接访问的（比如后端配置了静态文件服务，或者返回了带权限签名的临时URL）
• download属性会告诉浏览器直接下载文件而不是打开它，还能指定下载后的文件名
• 如果URL存在跨域问题，需要让后端配置CORS允许文件下载请求

场景2：需要通过后端接口获取文件流（比如根据文件ID下载） #

如果后端没有返回直接的下载URL，而是需要调用接口（比如/api/files/{id}/download）来获取文件内容，那就要在组件里写点逻辑来处理：

第一步：修改模板，传递当前文件对象给点击事件 #

<ng-container *ngFor="let document of searchVideoConsultation.TmpDocument">
  <div class="ui-g form-group">
    <div class="ui-g-12 ui-md-9">
      <a href="javascript:void(0)" (click)="downloadFile(document)">{{document.Document?.Name}}</a>
    </div>
  </div>
</ng-container>

第二步：在组件中实现downloadFile方法 #

首先要确保你已经在组件里注入了HttpClient：

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

downloadFile(document: any): void {
  // 假设文件ID存在document.Document?.Id，文件名是document.Document?.Name
  const fileId = document.Document?.Id;
  const fileName = document.Document?.Name;

  // 请求后端接口获取文件二进制流，指定responseType为blob
  this.http.get(`/api/files/${fileId}/download`, {
    responseType: 'blob',
    headers: new HttpHeaders({ 'Accept': 'application/octet-stream' })
  }).subscribe({
    next: (blob: Blob) => {
      // 创建临时URL指向文件流
      const url = window.URL.createObjectURL(blob);
      // 创建隐藏的a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = url;
      downloadLink.download = fileName;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理临时资源，避免内存泄漏
      window.URL.revokeObjectURL(url);
      document.body.removeChild(downloadLink);
    },
    error: (err) => {
      // 这里可以添加下载失败的提示，比如alert('下载失败，请稍后重试')
      console.error('文件下载出错:', err);
    }
  });
}

小提醒： #

• 要和后端确认接口返回的是文件的二进制流（Blob类型）
• 如果接口需要认证，记得在请求头里带上token之类的凭证
• 别忘了处理请求失败的情况，给用户友好提示

额外小技巧：PrimeNG Upload的文件信息保存 #

如果你用的是PrimeNG Upload的自动上传模式，可以在onUpload回调里把后端返回的文件信息（比如ID、下载URL）存到searchVideoConsultation.TmpDocument里，这样后续下载就能直接用这些数据了：

onUpload(event: any): void {
  // 假设后端返回的文件详情在event.files[0].response里
  const fileDetail = event.files[0].response;
  this.searchVideoConsultation.TmpDocument.push({ Document: fileDetail });
}

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