Angular表格对象下载实现：单行按钮函数编写及批量选择方案咨询

方案一：每行独立下载按钮 #

点击表格每行的下载按钮，单独下载对应对象的文件，具体实现如下：

1. 组件中注入HttpClient #

首先确保组件已引入并注入HttpClient，用于发起文件请求：

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

constructor(private http: HttpClient) {}

2. 完善downloadSdo函数 #

通过对象ID请求后端获取文件流，前端创建临时下载链接触发下载：

downloadSdo(sdo: SoftwareDataObject) {
  // 替换为你的后端下载接口地址
  const downloadUrl = `/api/sdos/${sdo.id}/download`;

  // 请求后端获取二进制文件流，设置responseType为blob
  this.http.get(downloadUrl, { responseType: 'blob' }).subscribe({
    next: (fileBlob) => {
      // 创建临时URL指向Blob对象
      const blobUrl = window.URL.createObjectURL(fileBlob);
      // 创建隐藏的a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      // 设置下载文件名，可从后端响应头提取或用对象属性拼接
      downloadLink.download = `${sdo.name || 'sdo-file'}_${sdo.id}.zip`;
      document.body.appendChild(downloadLink);
      downloadLink.click();

      // 清理临时资源，避免内存泄漏
      window.URL.revokeObjectURL(blobUrl);
      document.body.removeChild(downloadLink);
    },
    error: (error) => {
      console.error('文件下载失败:', error);
      // 可添加用户提示，如弹窗或Toast
    }
  });
}

注意事项 #

• 后端接口需正确返回文件流，并设置Content-Disposition响应头指定文件名（如attachment; filename="xxx.zip"）
• 根据实际文件类型调整download属性的后缀名（如.pdf、.json等）

方案二：批量选择下载（表格上方按钮） #

在表格上方添加批量下载按钮，先让用户选择多行对象，再统一下载，步骤如下：

1. 表格行添加选择复选框 #

在表格每行添加复选框，用于标记选中的对象：

<!-- 表格列示例 -->
<tr *ngFor="let sdo of sdoList">
  <td>
    <input type="checkbox" (change)="toggleSelect(sdo.id, $event.target.checked)" />
  </td>
  <!-- 其他表格列 -->
  <td>{{ sdo.name }}</td>
  <td>{{ sdo.id }}</td>
</tr>

2. 组件中维护选中ID数组 #

在组件类中定义数组存储选中的对象ID，并实现选择切换逻辑：

selectedSdoIds: number[] = [];

toggleSelect(sdoId: number, isChecked: boolean) {
  if (isChecked) {
    this.selectedSdoIds.push(sdoId);
  } else {
    this.selectedSdoIds = this.selectedSdoIds.filter(id => id !== sdoId);
  }
}

3. 添加批量下载按钮并实现函数 #

在表格上方添加按钮，点击后触发批量下载：

<!-- 表格上方的批量下载按钮 -->
<wb-button
  name="batchDownload"
  variant="primary"
  size="s"
  (click)="batchDownloadSdos()"
  i18n >批量下载选中项</wb-button>

实现批量下载函数：

batchDownloadSdos() {
  if (this.selectedSdoIds.length === 0) {
    alert('请先选择要下载的对象');
    return;
  }

  // 替换为你的后端批量下载接口
  const batchUrl = `/api/sdos/batch-download`;

  // 发送POST请求携带选中ID，获取打包后的文件流
  this.http.post(batchUrl, { ids: this.selectedSdoIds }, { responseType: 'blob' }).subscribe({
    next: (zipBlob) => {
      const blobUrl = window.URL.createObjectURL(zipBlob);
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.download = `batch-sdos-${new Date().getTime()}.zip`;
      document.body.appendChild(downloadLink);
      downloadLink.click();

      window.URL.revokeObjectURL(blobUrl);
      document.body.removeChild(downloadLink);
    },
    error: (error) => {
      console.error('批量下载失败:', error);
    }
  });
}

注意事项 #

• 后端需支持批量打包逻辑，将选中的多个对象文件打包为ZIP返回（避免浏览器拦截多个独立下载请求）
• 若无需打包，也可循环调用单个下载接口，但需注意浏览器的弹窗拦截限制

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