Angular2调用后端接口完成Excel导出

Angular2响应后端的Excel导出

设置一个导出按钮

样式可以采用zorro.官网:https://ng.ant.design/docs/introduce/zh

html

<!-- 参数为查询条件-->
<button nz-button nzType="default"  (click)="excelOne(year,month)" ><i class="anticon anticon-file-excel"></i>导出</button>

component

@Injectable()
export class NbBusinessFormService {
  constructor(private bpmHttp: NbHttp) {
  } 

excelOne(year, month) {
    const exyear = this.year;
    const exmonth = this.month;
     
    this.doExcelExport(exyear, exmonth).subscribe((exportResult) => {
        
      const blob = new Blob([exportResult], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        const objectUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('style', 'display: none');
        a.setAttribute('href', objectUrl);
        a.setAttribute('download', exyear + '年' + exmonth + '月份' + '供应商详情.xlsx');
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(objectUrl);
      this.supLoading = false;
      }
    );
 }

//导出
  doExcelExport(exyear: number, exmonth: number, supplierName: string) {
    const options: RequestOptionsArgs = {
      headers: new Headers({ 'Content-Type': 'application/json;charset=utf-8' }),
      responseType: ResponseContentType.Blob
    };
    return this.bpmHttp.fullPost("连接后台路径url自定义", { year: exyear, month: exmonth}, options);
  }

}