AI专业者开发社区 1 号成员
  •  0 回帖  •  26 浏览  •  4 个月前
   

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

一、前言 #

项目中前端采用的 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.           params: params,
  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 的实现

  1. [HttpGet]
  2.         public IHttpActionResult ExportDataByFore(ExportModel dto)
  3.         {
  4.             var dt = JsonConvert.DeserializeObject<DataTable>(dto.Data);
  5.             var fileName = dto.FileName + DateTime.Now.ToString("yyMMddHHmmssfff") +".xls";
  6.             // 设置导出格式
  7.             ExcelConfig excelconfig = new ExcelConfig();
  8.             excelconfig.Title = dto.Title;
  9.             excelconfig.TitleFont = "微软雅黑";
  10.             excelconfig.TitlePoint = 25;
  11.             excelconfig.FileName = fileName;
  12.             excelconfig.IsAllSizeColumn = true;
  13.             // 每一列的设置, 没有设置的列信息，系统将按 datatable 中的列名导出
  14.             excelconfig.ColumnEntity = new List<ColumnEntity>();
  15.             // 表头
  16.             foreach (var col in dto.LstCol)
  17.             {
  18.                 excelconfig.ColumnEntity.Add(new ColumnEntity(){ Column = col.prop, ExcelColumn = col.label});
  19.             }
  20.             // 调用导出方法
  21.             var stream = ExcelHelper.ExportMemoryStream(dt, excelconfig); // 通过 NPOI 形成将数据绘制成 Excel 文件并形成内存流
  22.             var browser = String.Empty;
  23.             if (HttpContext.Current.Request.UserAgent != null)
  24.             {
  25.                 browser = HttpContext.Current.Request.UserAgent.ToUpper();
  26.             }
  27.             HttpResponseMessage httpResponseMessage = new HttpResponseMessage(HttpStatusCode.OK);
  28.             httpResponseMessage.Content = new StreamContent(stream);
  29.             httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); // 返回类型必须为文件流 application/octet-stream
  30.             httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") // 设置头部其他内容特性, 文件名
  31.             {
  32.                 FileName =
  33.                     browser.Contains("FIREFOX")
  34.                         ? fileName
  35.                         : HttpUtility.UrlEncode(fileName)
  36.             };
  37.             return ResponseMessage(httpResponseMessage);
  38.         }

3. web api 的 CORS 配置

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

四、总结 #

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