Angular下載文本文檔或者壓縮包功能的實現

1.html裏綁定下載函數

 <button (click)="exportConfirm()" >下載</button>

2.ts裏編寫下載邏輯


// 接收數據;
paramData: any = null;
//下載文件
exportConfirm(){
    //要求後端返回的內容爲二進制流
    let info = { responseType: 'arraybuffer'};
    //請求HTTP下載
    const params = new HttpParams();
    //對時間進行規範化處理,如果沒有要求可省略此步驟
    var now  = new Date();
    let nowNew = formatDate(now, 'yyyyMMddHHmm', 'zh-cn');
    //向後端先請求下載功能,後端將所需下載的內容轉換成二進制流返回給前端,前端拿到返回的二進制流進行處理,將其轉換成.xls格式或者.zip格式等等
    this.service.downloadLog(params,info,this.downloadLogParams).subscribe(data => {
        this.alarmManagementService.download(data,this.paramData,'periodic',nowNew)
   });
}

3.service裏寫接口以及返回二進制流處理

文本文檔格式的下載(get請求):

  // 遍歷拼接對象
  traverse(obj) {
    let traverse = '?';
    for (var i in obj) {
      if (obj[i]) {
        traverse = traverse + i + '=' + obj[i] + '&';
      }
    }
    return (traverse = traverse.substring(0, traverse.length - 1));
  }
   // 請求下載
  downloadLog(params, info,a) {
    let obj=this.traverse(a)
    return this.http.get<any>
    ( `${this.url}/hbrop` + obj, {
      params: params,
      responseType: info.responseType
    });
  }

  // 下載並轉換成文本文檔格式
 download(data, content, type) {
  const blob = new Blob([data], {
  //轉換成文本格式所需的type內容
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  // 自定義導出excel表名字
  var file = '歷史作業.xls';
  saveAs(blob, file);
}

壓縮包格式的下載(post請求):

 // 請求下載
 downloadLog(params,info,downloadLogParams){
  return this.http.post<any>(`${this.URL}/hbrop/`,downloadLogParams, {
    params: params,
    responseType: info.responseType,
  });
}

// 下載並轉換成壓縮包格式
download(data, content, type,time) {
  const blob = new Blob([data], {
  //轉換成壓縮包格式所需的type內容
  'type':'application/zip'
   });
  let fileName = "log" + "-" + time + "-" + ".tar";//自定義導出名字
  saveAs(blob, fileName);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章