时间戳

首页 > 解决方案 > 我需要帮助 如何在Spinner 中添加一个记录表格的功能以在Excel 中导出数据？角材料

angular - 我需要帮助 如何在Spinner 中添加一个记录表格的功能以在Excel 中导出数据？角材料

问题描述

我需要在执行完“exportTable”函数后添加微调器并删除它如示例所示：

ts：

  Export(){
    this.spinner.show();
    this.ExpTable.exportTable('xlsx', {fileName:'Cat_claves_presup', sheet: 'Hoja1', Props: {Author: 'Administrador'}});
    this.spinner.hide();
  }

HTML：


<mat-toolbar>
<button mat-button (click)="Export()">
  <mat-icon color="primary">unarchive</mat-icon>Exportar
</button>
<button mat-button>
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filtrar por">
  </mat-form-field>
</button>
</mat-toolbar>
<div>
<mat-table matTableExporter  #exporter="matTableExporter" [dataSource]="dataSource" matSort style="overflow-x: scroll !important; display: grid" class="scroll" hiddenColumns="[1,3,4]">
<ng-container matColumnDef="id_clav_p">
  <mat-header-cell *matHeaderCellDef mat-sort-header class="columna1"> No. </mat-header-cell>
  <mat-cell *matCellDef="let row" class="columna1" > {{row.id_clav_p}} </mat-cell>
</ng-container>

问题是 Spinner 没有显示（），也就是说该组件显示等待过程并简单地执行通过 mat-table 运行以导出数据的函数。我尝试添加回调、订阅甚至 setTimeout，但我无法让它先显示微调器，然后运行它导出的代码，最后隐藏微调器。

标签： angulartypescript

解决方案

ExportDataToExcel(){
  const ws: XLSX.WorkSheet=XLSX.utils.table_to_sheet(this.table.nativeElement);
  const wb: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  /* save to file */
  XLSX.writeFile(wb, 'SheetJS.xlsx');
  }

ngx loader 的步骤你可以参考这个链接：https ://www.npmjs.com/package/ngx-spinner

推荐阅读