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