angular数据导出

小迷糊MJ

于 2022-10-20 18:13:20 发布

阅读量386

点赞数

分类专栏：学习笔记文章标签： angular.js javascript ecmascript

本文链接：https://blog.csdn.net/Mjxiaomihu/article/details/127412077

版权

学习笔记专栏收录该内容

55 篇文章 1 订阅

订阅专栏

1、HTML按钮

<button nz-button nzType="primary" (click)="exportData()">导出</button>

2、js部分

//导出数据
  exportData(){
      this.nzLoading = true
      this.pledgeSearch.page.pageNum = this.pageNum
      let urls = [ 
        environment.permission.purchase.findPurchaseExport,
        environment.permission.purchase.findTransferExport,
        environment.permission.purchase.findReleaseExport
      ];
      let url = urls[this.businessType - 1] ;
      this.httpService.findPost(url,this.pledgeSearch, {responseType: "blob",timeout:30000}).subscribe((res: PageRes<PurchaseList>) => {
        this.nzLoading = false ;
        this.download(res) ;
    })
  }
  
 download(data : any){
    const contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);//将blob类型的url放在内存中

    // 以动态创建a标签进行下载
    const a = document.createElement("a");
    a.href = url;

    let names =['主动申购记录','被动划转记录','释放明细记录']
    let name = names[this.businessType-1]

    a.download = name; //文件名
    a.click();

    //释放内存，移除元素
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }

总结：

1、将responseType声明为blob

2、多个数据时通过数组下标取到对应数据