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