Angular:前端导出后台返回的数据为Excel

比较简单就不废话了，主要实现方法代码中有分隔，直接搞上代码：

1.html：

<a class="collapse" (click)="downLoadExcel()">
       导出Excel
       <i nz-icon nzType="vertical-align-bottom" nzTheme="outline"></i>
</a>

2..ts：

  /**
   * 导出表格数据为excel
   *
   * @memberof FinaFlowStatComponent
   */
  downLoadExcel() {
    const self = this;
    self.loading = true;
    if (!self.tableDatas || self.tableDatas.length == 0) {
      this.commonHelperService.showMessage('不存在导出的统计数据', CommonHelperService.messageType.error);
      self.loading = false;
    } else { // 下面是主要实现代码，self.requestParam是按照自己封装的请求类传递的参数
      self.finaFlowStatService.exportExcel(self.requestParam).subscribe((result: any) => {
        let blob = new Blob([result], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });  // 导出的格式为excel
        let objectUrl = URL.createObjectURL(blob); // 创建新的对象URL指向执行的Blob对象.
        let a = document.createElement('a');
        let fileName = formatDate(new Date(), 'yyyy-MM-dd hh:mm', this.i18n.getLocaleId()) + '.xlsx';
        document.body.appendChild(a);
        a.setAttribute('style', 'display:none');
        a.setAttribute('href', objectUrl);
        a.setAttribute('download', fileName);
        a.click();
        URL.revokeObjectURL(objectUrl); // 释放掉创建的URL对象
        self.loading = false;
      }, // 上面是主要请求方法
        err => {
          this.commonHelperService.showMessage('导出Excel失败', CommonHelperService.messageType.error);
          self.loading = false;
        },
      )
    }
  }

　　

3.fina-flow-stat.service.ts：

/**
   * 导出excel表格，使用blob二进制流
   * @param {RequestCommand} param 请求的参数
   * @returns {Observable<ResponseResult>} 返回承诺，包括满足条件的数据
   */
  exportExcel(param: RequestCommand): Observable<Blob> {
    param.functionName = 'ExportStatFinaFlowAccount';
    const url = this.getUrl() + 'fina/FinaAccount';

    return this.http.post(url, param, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
      withCredentials: true,
      responseType: 'blob' 
    });
  }