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);
  }

}