一、前言

项目中，前端采用Element UI框架，远程数据请求使用axios，后端接口框架使用ASP.NET WebAPI，数据使用NPOI组件导出到Excel。其业务场景主要是从列表页面导出表格数据(如会员信息、订单信息等)。).如果表格数据是按条件过滤的，需要将条件传递给后端api，过滤后将数据导出到Excel。

我想了三个前端导出：的方案

1.使用location.href打开接口地址。缺陷：无法将token传递给后端api，无法保证接口的安全检查，只能在get模式下请求接口。

2.使用axios请求接口，在过滤后的数据服务器上生成并保存文件，然后返回到远程文件地址，再通过打开带有location的文件地址下载，href劣势：实现复杂，每次导出都会在服务器上生成文件，但是没有合适的时间触发再次删除文件，会在服务器上形成垃圾数据。Advantage :每次导出都可以录制。

3.采用axios请求接口，服务器api返回文件流。前端接收到文件流后，通过blob对象存储，创建为url，通过A标签下载。优点3360前端可以通过令牌参数验证接口安全性，支持get或post。

因为它的应用场景是在导出Excel文件之前，必须对数据进行过滤，并且必须验证接口安全性，所以第三种方案是最好的选择。百度之后发现，目前使用最多的是第三种方案。

二、Vue axios前端处理

1.Axios应该在响应拦截器中处理(这里不介绍axios的使用，具体请参考axios的中文描述，我们在项目中对axios做了统一的拦截定义)。应特别注意：响应。header[' content-disposition ']，默认情况下无法获取，因此需要在服务器端配置webapi。请参考第三点中的webapi CORS。

//response interceptor service . interceptors . response . use(response={//blob类型是文件下载对象，不管请求方法是什么，文件流数据if(response . config . response type==' blob '){ const filename=decoderuri(response . headers[' content-disposition '])。split ('filename=') [1])//返回文件流内容，获取文件名。反应的获得。默认情况下无法获取标题['内容-处置']，服务器webapi需要配置Return Promise。resolve({ data : response . data，FileName: fileName })} //根据后端逻辑的实际情况，需要弹出一个窗口显示友好的错误}，error={ let resp=error . response if(resp . data){ console . log(' err : ' decodeuricomponen(resp . data))//for debug }//todo :需要判断return Promise.reject(error) })2。单击导出按钮请求应用编程接口。需要注意的是，接口请求配置的响应类型为responsetype :‘blob’(或arrayBuffer)；但是，IE9及以下版本的浏览器不支持createObjectURL。IE浏览器需要特殊处理才能将blob转换为文件。

export excel(){ let params={ } let p=this。get query params()//如果(p) params=object ({}，params，p) axios.get('接口地址'，{ params: params，responseType: 'blob' })则获取相应的参数。然后(RES={ var Blob=new Blob([RES . data]，{ type : ' application/vnd . ms-excel；Charset=utf-8' }) //对于IE浏览器的处理，部分IE浏览器不支持createobject URL if(window . navigator window . navigator . mssaveropenlob){ window . navigator . mssaveropenlob(blob，RES . filename)} else { var downloadeelement=document . createelement(' a ')var href=window。URL.createObjectURL(blob) //创建下载链接Download element . href=href Download element . Download=res.filename//file名称document . body . appendchild(Download element)Download element . Click()//Click下载document . body . remove child(Download element)//Download移除元素window . URL . revokeobjecturl(href)//Release blob object } })第三，WebApi NPOI后端处理

1.需要通过接口参数，查询数据

为了保持与分页组件查询接口一直的参数，采用了得到请求方式，方便前端传参webapi。接口必须返回IHttpActionResult类型

[httpgetpublic]IHttpActionResult导出数据([FromURi]分页分页、[FromURi]ordereq dto){//取出数据源数据表dt=这个。服务. ConvertToFilter())；if (dt .行数。计数65535) {引发新的异常('最大导出行数为65535行，请按条件筛选数据!');} foreach(dt中的记录行行){ var ISRANAME=row[' ISRANAME '].to Bool()；第[' ISRANAME ']行=isRealName？'是' : '否；} var模型=新导出模型()；模特数据=JsonConvert .SerializeObject(dt)；模特。文件名='会员信息；模特。标题=模型。文件名；模特LstCol=new listportdatacolumn()；模特。添加（新的ExportDataColumn(){ prop='全名'，label='会员名称' });模特。添加（新的ExportDataColumn(){ prop='真实姓名'，label='真实姓名' });模特。添加（新的ExportDataColumn(){ prop='年级名'，label='会员等级' });模特。添加（新的ExportDataColumn(){ prop=' Telphone '，标签='电话' });模特。添加（新的ExportDataColumn(){ prop=' Arename '，label='区域' });模特。添加（新的ExportDataColumn(){ prop=' GridName '，label='网格' });模特。添加（新的导出数据列(){属性='地址，标签='门牌号' });模特。添加（新的ExportDataColumn(){ prop=' RegTiME '，label='注册时间' });模特。添加（新的导出数据列(){属性='描述，标签='备注' });返回ExportDataByFore(模型);}2.关键导出函数ExportDataByFore的实现

[httpgetpublic]ihttpactionresultexportdatabyfore(导出模型dto){ var dt=JsonConvert .反序列化对象数据表(dto .数据);var fileName=dto .文件名日期时间。现在。ToString(' yymmdhmmssfff ').xls '；//设置导出格式excel config excel config=new excel config()；过度自信.标题=dto .标题；' excelconfig .'' TitleFont='微软雅黑；过度自信.TitlePoint=25excelconfig .文件名=文件名索引配置文件.IsAllSizeColumn=true//每一列的设置，没有设置的列信息，系统将按数据表中的列名导出过度自信.列实体=新列表列实体()；//表头foreach(数据中的变量列excelconfig .列实体。添加(新列实体(){ Column=col . prop，ExcelColumn=col . label })；} //调用导出方法var stream=ExcelHelper .ExportMemoryStream(dt，excel config)；//通过北太平洋涛动指数形成将数据绘制成超过文件并形成内存流定义变量浏览器=字符串。空的；if (HttpContext .当前。请求。用户代理！=null) { browser=HttpContext .当前。请求。用户代理。toupper()；} HttpResponseMessage HttpResponseMessage=new HttpResponseMessage(HttpStatusCode .OK)；http响应消息.内容=新流内容（流);http响应消息.内容。标题。内容类型=新的MediaTypeHeaderValue('应用程序/八位字节流');//返回类型必须为文件流应用程序/八位字节流http响应消息.内容。标题。内容处置=新的内容处置头值('附件')//设置头部其他内容特性，文件名{ FileName=浏览器。包含(' FIREFOX ')？文件名： HttpUtility .UrlEncode(FIlename)}；返回响应消息(httpResponseMessage)；}3.互联网连结编程界面的克-奥二氏分级量表配置

采用互联网连结编程界面构建后端接口服务的同学，都知道，接口要解决跨域问题，都需要进行美国石油学会(美国石油协会)的克-奥二氏分级量表配置，这里主要是针对于前端爱可信的响应应答标题中获取不到内容处理属性，进行以下配置

四、总结

以上是我在实现axios导出Excel文件时遇到的一些问题和要点的总结。因为项目涉及到其他前后业务和公司架构的一些核心源代码。拉出一个完整的演示需要时间，所以没有完整的演示展示。不过我已经整理了NPOI相关操作函数的源代码，放在github上了。https://github.com/yinboxie/BlogExampleDemo