話不多說，直接來實際的。

import { Injectable } from ‘@angular/core‘;
import { HttpClient, HttpParams, HttpHeaders } from ‘@angular/common/http‘;
import { Observable } from ‘rxjs‘;
@Injectable()

首先引用基礎組件。

url: string;
constructor(private http: HttpClient) { }

聲明api路徑訪問

實例化對象的時候初始化HttpClient對象。

關於導出excel這塊，我用的是文件流，不同思路的朋友可以參考著

後臺c#代碼：

public FileResult Export(int itype = 0)
{
Expression<Func<t_CarRegister, bool>> Func =p=> true;
if (itype > 0)
{
Func = Func.And(u => u.f_CarType == itype);
}
var list = _CRS.GetConditionByWhereToExport(Func);
DataSet ds = new DataSet();
DataTable dt = DataTableExt.ToDataTable(list);
ds.Tables.Add(dt);
MemoryStream stream = NPOIExcelHelper.ExportExcel(dt, NPOIExcelHelper.ExtendPropertiesType.None, "t_CarRegister");
return File(stream, "application/vnd.ms-excel", "車輛管理" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".xls");
}

這裏用來NPOI第三方excel導出組件，將查詢到的數據轉化為excel形式，然後以文件流的形式返回出來。

現在看看前臺js處理這塊：

//導出excel
excelExport(itype: string) {
var now = new Date()
this.url = "/CarRegister/Export?itype=" + itype;
return this.downloadFile("車輛管理" + now.getDate() + ".xls");
}

//這是調用http向後臺發送請求

doDownload() {
return this.http.get(this.url, { headers: new HttpHeaders().append(‘Content-Type‘, ‘application/vnd.ms-excel‘), responseType: ‘blob‘, observe: ‘body‘ })
}

//將後臺返回的的文件流存儲存儲為需要保存的文件類型

downloadFile(filename: string) {
return this.doDownload().subscribe(
res => {
var url = window.URL.createObjectURL(res);
var a = document.createElement(‘a‘);
document.body.appendChild(a);
a.setAttribute(‘style‘, ‘display: none‘);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
}, error => {
console.log(‘download error:‘, JSON.stringify(error));
}, () => {
console.log(‘Completed file download.‘)
});
}

這一塊的思路，是將查詢doDownload方法查詢完畢後的對象進行處理。獲取文件流對象，將文件流對象創造出來，然後用一個a標簽去點擊他，得到這個對象，然後去點擊這個a標簽，觸發下載這個機制，然後將excel下載到本地。

目前針對asp mvc這塊導出excel是這樣子的， 有什麽疑惑可以 留言，或者加我qq一起溝通交流。QQ：1024358044

在ASP MVC中如何使用Angular5導出excel文件