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

标签：ram   一起   evo   spl   add   prope   exce   需要   关于   

话不多说，直接来实际的。

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文件

标签：ram   一起   evo   spl   add   prope   exce   需要   关于   

原文地址：https://www.cnblogs.com/HuJinBoss/p/9073142.html