如何为Fetch API数据拉取与XLSX文件生成实现Mat进度条？

问题描述 #

当前使用mat-spinner展示导出Excel的加载状态，希望替换为<mat-progress-bar mode="determinate"></mat-progress-bar>，同时大致跟踪数据库数据拉取和XLSX文件生成两个阶段的进度，无需精确数值，进度突变也可接受。

可行性说明 #

完全可行。我们可以将整个导出流程划分为几个关键阶段，为每个阶段分配对应的进度值，通过阶段式更新进度条数值来实现大致的进度展示。

代码修改方案 #

1. 组件文件（report.ts） #

新增进度值变量，在流程关键节点更新进度：

export class ReportComponent {
  // 进度值变量，初始为0
  progressValue = 0;
  // 标记是否正在导出，替换原downloadSpinner
  downloadInProgress = false;

  export_to_excel() {
    this.downloadInProgress = true;
    this.progressValue = 20; // 标记：开始请求数据

    this.reportService.getResponseCodeReportData()
      .subscribe({
        next: data => {
          this.progressValue = 60; // 标记：数据拉取完成，开始生成Excel
          if (data.length !== 0) {
            const XlsMasterData = data;
            const workSheet = XLSX.utils.json_to_sheet(XlsMasterData);
            const workBook: XLSX.WorkBook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workBook, workSheet, 'SheetName');
            XLSX.writeFile(workBook, 'response_code.xlsx');
            this.progressValue = 100; // 标记：Excel生成并下载完成
          } else {
            this.showSwalmessage("No record Found!", "", "warning", true);
            this.progressValue = 0; // 无数据，重置进度
          }
        },
        error: (error: any) => {
          this.showSwalmessage("Something Went wrong", error, "warning", true);
          this.progressValue = 0; // 出错，重置进度
        },
        complete: () => {
          // 延迟重置，让用户看到100%的完成状态
          setTimeout(() => {
            this.downloadInProgress = false;
            this.progressValue = 0;
          }, 500);
        }
      });
  }
}

2. 模板文件（report.html） #

替换mat-spinner为mat-progress-bar，调整布局展示进度：

<div class="body" style="text-align: center;">
    <div class="button-demo">
        <!-- 进度条：仅在导出中显示 -->
        <mat-progress-bar 
          mode="determinate" 
          [value]="progressValue"
          *ngIf="downloadInProgress"
          style="width: 120px; margin-bottom: 8px;"
        ></mat-progress-bar>
        
        <button 
          class="btn btn-primary btn-border-radius waves-effect" 
          tabindex="0" 
          aria-controls="example1" 
          type="button" 
          (click)="export_to_excel()" 
          mat-raised-button 
          color="primary" 
          style="width: 120px;"
          [disabled]="downloadInProgress"
        >
            <div style="display: flex; align-items: center; justify-content: center;">
                <div style="min-width: 80px;">
                    {{ downloadInProgress ? 'Processing' : 'Download' }}
                </div>
            </div>
        </button>
    </div>
</div>

3. 服务文件（service.ts） #

无需修改，当前阶段式更新已满足需求；若后续需要更精确的HTTP请求进度，可开启reportProgress选项：

getResponseCodeReportData(){
  return this.http.get<any[]>(`${environment.apiUrl}/responsecode-report/`);
}

补充说明 #

• 进度值为大致估算：20%（开始请求）→60%（数据拉取完成）→100%（Excel生成完成），可根据实际业务耗时调整比例
• 延迟重置进度是为了让用户直观看到任务完成的状态，提升体验
• 按钮添加disabled属性，避免重复触发导出操作

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