AICODER大前端培训

AICODER-IT培训专家,前端培训基地,前端培训,全栈培训,大学生IT培训基地,线上IT课程免费自学,线下培训项目实战,实习,html5培训实习-AICODE程序员

在线咨询

基于Vue + axios + WebApi + NPOI导出Excel文件

AICODER官方 发布于: 2019年6月5日 10时41分6秒 阅读213次

一、前言

项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件。其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel。

思考过前端导出的3种方案:

1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.

2.采用axios请求接口,先在筛选后的数据服务端生成文件并保存,然后返回远程文件地址,再采用 location.href打开文件地址进行下载. 缺点: 实现复杂,并且每次导出会在服务端生成文件,但是又没有合适的时机再次触发删除文件,会在服务端形成垃圾数据。优点:每次导出都可以有记录。

3. 采用axios请求接口,服务端api返回文件流,前端接收到文件流后,采用blob对象存储,并创建成url, 使用a标签下载. 优点:前端可传token参数校验接口安全性,并支持get或post两种方式。

因其应用场景是导出Excel文件之前,必须筛选数据,并需要对接口安全进行校验,所以第3种方案为最佳选择。在百度之后,发现目前使用最多的也是第3种方案。

二、Vue + axios 前端处理

1.axios 需在response拦截器里进行相应的处理(这里不再介绍axios的使用, 关于axios的用法,具体请查看Axios中文说明 ,我们在项目中对axios进行了统一的拦截定义). 需特别注意: response.headers['content-disposition'],默认是获取不到的,需要对服务端webapi进行配置,请查看第三点中webapi CORS配置

  1. // respone拦截器

  2. service.interceptors.response.use(

  3.   response => {

  4.     // blob类型为文件下载对象,不论是什么请求方式,直接返回文件流数据

  5.     if (response.config.responseType === 'blob') {

  6.       const fileName = decodeURI(

  7.         response.headers['content-disposition'].split('filename=')[1]

  8.       )

  9. // 返回文件流内容,以及获取文件名, response.headers['content-disposition']的获取, 默认是获取不到的,需要对服务端webapi进行配置

  10.       return Promise.resolve({ data: response.data, fileName: fileName })

  11.     }

  12.    // 依据后端逻辑实际情况,需要弹窗展示友好错误

  13.   },

  14.   error => {

  15.     let resp = error.response

  16.     if (resp.data) {

  17.       console.log('err:' + decodeURIComponent(resp.data)) // for debug

  18.     }

  19.     // TODO: 需要依据后端实际情况判断

  20.     return Promise.reject(error)

  21.   }

  22. )

2. 点击导出按钮,请求api. 需要注意的是接口请求配置的响应类型responseType:'blob' (也可以是配置arrayBuffer) ; 然IE9及以下浏览器不支持createObjectURL. 需要特别处理下IE浏览器将blob转换成文件。

  1. exportExcel () {

  2.       let params = {}

  3.       let p = this.getQueryParams() // 获取相应的参数

  4.       if (p) params = Object({}, params, p)

  5.       axios

  6.         .get('接口地址', {

  7.           paramsparams,

  8.           responseType: 'blob'

  9.         })

  10.         .then(res => {

  11.           var blob = new Blob([res.data], {

  12.             type: 'application/vnd.ms-excel;charset=utf-8'

  13.           })

  14.           // 针对于IE浏览器的处理, 因部分IE浏览器不支持createObjectURL

  15.           if (window.navigator && window.navigator.msSaveOrOpenBlob) {

  16.             window.navigator.msSaveOrOpenBlob(blob, res.fileName)

  17.           } else {

  18.             var downloadElement = document.createElement('a')

  19.             var href = window.URL.createObjectURL(blob) // 创建下载的链接

  20.             downloadElement.href = href

  21.             downloadElement.download = res.fileName // 下载后文件名

  22.             document.body.appendChild(downloadElement)

  23.             downloadElement.click() // 点击下载

  24.             document.body.removeChild(downloadElement) // 下载完成移除元素

  25.             window.URL.revokeObjectURL(href) // 释放掉blob对象

  26.           }

  27.         })

  28.     }

   

三、WebApi + NPOI 后端处理

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

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

  1. [HttpGet]

  2.         public IHttpActionResult ExportData([FromUri]Pagination pagination, [FromUri] OrderReqDto dto)

  3.         {

  4.             //取出数据源

  5.             DataTable dt = this.Service.GetMemberPageList(pagination, dto.ConvertToFilter());

  6.             if (dt.Rows.Count > 65535)

  7.             {

  8.                 throw new Exception("最大导出行数为65535行,请按条件筛选数据!");

  9.             }

  10.             foreach (DataRow row in dt.Rows)

  11.             {

  12.                 var isRealName = row["IsRealName"].ToBool();

  13.                 row["IsRealName"] = isRealName ? "" : "";

  14.             }

  15.             var model = new ExportModel();

  16.             model.Data = JsonConvert.SerializeObject(dt);

  17.             model.FileName = "会员信息";

  18.             model.Title = model.FileName;

  19.             model.LstCol = new List<ExportDataColumn>();

  20.             model.LstCol.Add(new ExportDataColumn() { prop = "FullName", label = "会员名称" });

  21.             model.LstCol.Add(new ExportDataColumn() { prop = "RealName", label = "真实姓名" });

  22.             model.LstCol.Add(new ExportDataColumn() { prop = "GradeName", label = "会员等级" });

  23.             model.LstCol.Add(new ExportDataColumn() { prop = "Telphone", label = "电话" });

  24.             model.LstCol.Add(new ExportDataColumn() { prop = "AreaName", label = "区域" });

  25.             model.LstCol.Add(new ExportDataColumn() { prop = "GridName", label = "网格" });

  26.             model.LstCol.Add(new ExportDataColumn() { prop = "Address", label = "门牌号" });

  27.             model.LstCol.Add(new ExportDataColumn() { prop = "RegTime", label = "注册时间" });

  28.             model.LstCol.Add(new ExportDataColumn() { prop = "Description", label = "备注" });

  29.             return ExportDataByFore(model);

  30.         }

    2.关键导出函数 ExportDataByFore的实现

  31. [HttpGet]

  32.         public IHttpActionResult ExportDataByFore(ExportModel dto)

  33.         {

  34.             var dt = JsonConvert.DeserializeObject<DataTable>(dto.Data);

  35.             var fileName = dto.FileName + DateTime.Now.ToString("yyMMddHHmmssfff") + ".xls";

  36.             //设置导出格式

  37.             ExcelConfig excelconfig = new ExcelConfig();

  38.             excelconfig.Title = dto.Title;

  39.             excelconfig.TitleFont = "微软雅黑";

  40.             excelconfig.TitlePoint = 25;

  41.             excelconfig.FileName = fileName;

  42.             excelconfig.IsAllSizeColumn = true;

  43.             //每一列的设置,没有设置的列信息,系统将按datatable中的列名导出

  44.             excelconfig.ColumnEntity = new List<ColumnEntity>();

  45.             //表头

  46.             foreach (var col in dto.LstCol)

  47.             {

  48.                 excelconfig.ColumnEntity.Add(new ColumnEntity() { Column = col.prop, ExcelColumn = col.label });

  49.             }

  50.             //调用导出方法

  51.             var stream = ExcelHelper.ExportMemoryStream(dt, excelconfig); // 通过NPOI形成将数据绘制成Excel文件并形成内存流

  52.             var browser = String.Empty;

  53.             if (HttpContext.Current.Request.UserAgent != null)

  54.             {

  55.                 browser = HttpContext.Current.Request.UserAgent.ToUpper();

  56.             }

  57.             HttpResponseMessage httpResponseMessage = new HttpResponseMessage(HttpStatusCode.OK);

  58.             httpResponseMessage.Content = new StreamContent(stream);

  59.             httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); // 返回类型必须为文件流application/octet-stream

  60.             httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") // 设置头部其他内容特性, 文件名

  61.             {

  62.                 FileName =

  63.                     browser.Contains("FIREFOX")

  64.                         ? fileName

  65.                         : HttpUtility.UrlEncode(fileName)

  66.             };

  67.             return ResponseMessage(httpResponseMessage);

  68.         }

    3. web api 的CORS配置

    采用web api 构建后端接口服务的同学,都知道,接口要解决跨域问题,都需要进行api的 CORS配置, 这里主要是针对于前端axios的响应response header中获取不到 content-disposition属性,进行以下配置

四、总结

以上就是我在实现axios导出Excel文件功能时,遇到的一些问题,以及关键点进行总结。因为项目涉及到前后端其他业务以及公司架构的一些核心源码。要抽离一个完整的demo,比较耗时,所以没有完整demo展示. 但我已把NPOI相关的操作函数源码,整理放至github上。https://github.com/yinboxie/BlogExampleDemo


AICODER编辑推荐:



报名就业班送基础班

最近分享