话不多说,直接来实际的。
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
原文地址:https://www.cnblogs.com/HuJinBoss/p/9073142.html