Vue+axios+WebApi+NPOI导出Excel文件实例方法


Posted in Javascript onJune 05, 2019

一、前言

项目中前端采用的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配置

// respone拦截器
service.interceptors.response.use(
 response => {
 // blob类型为文件下载对象,不论是什么请求方式,直接返回文件流数据
 if (response.config.responseType === 'blob') {
  const fileName = decodeURI(
  response.headers['content-disposition'].split('filename=')[1]
  )
// 返回文件流内容,以及获取文件名, response.headers['content-disposition']的获取, 默认是获取不到的,需要对服务端webapi进行配置
  return Promise.resolve({ data: response.data, fileName: fileName })
 }
 // 依据后端逻辑实际情况,需要弹窗展示友好错误
 },
 error => {
 let resp = error.response
 if (resp.data) {
  console.log('err:' + decodeURIComponent(resp.data)) // for debug
 }
 // TODO: 需要依据后端实际情况判断
 return Promise.reject(error)
 }
)

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

exportExcel () {
  let params = {}
  let p = this.getQueryParams() // 获取相应的参数
  if (p) params = Object({}, params, p)
  axios
  .get('接口地址', {
   params: params,
   responseType: 'blob'
  })
  .then(res => {
   var blob = new Blob([res.data], {
   type: 'application/vnd.ms-excel;charset=utf-8'
   })
   // 针对于IE浏览器的处理, 因部分IE浏览器不支持createObjectURL
   if (window.navigator && window.navigator.msSaveOrOpenBlob) {
   window.navigator.msSaveOrOpenBlob(blob, res.fileName)
   } else {
   var downloadElement = document.createElement('a')
   var href = window.URL.createObjectURL(blob) // 创建下载的链接
   downloadElement.href = href
   downloadElement.download = res.fileName // 下载后文件名
   document.body.appendChild(downloadElement)
   downloadElement.click() // 点击下载
   document.body.removeChild(downloadElement) // 下载完成移除元素
   window.URL.revokeObjectURL(href) // 释放掉blob对象
   }
  })
 }

三、WebApi + NPOI 后端处理

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

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

[HttpGet]
  public IHttpActionResult ExportData([FromUri]Pagination pagination, [FromUri] OrderReqDto dto)
  {
   //取出数据源
   DataTable dt = this.Service.GetMemberPageList(pagination, dto.ConvertToFilter());
   if (dt.Rows.Count > 65535)
   {
    throw new Exception("最大导出行数为65535行,请按条件筛选数据!");
   }
   foreach (DataRow row in dt.Rows)
   {
    var isRealName = row["IsRealName"].ToBool();
    row["IsRealName"] = isRealName ? "是" : "否";
   }
   var model = new ExportModel();
   model.Data = JsonConvert.SerializeObject(dt);
   model.FileName = "会员信息";
   model.Title = model.FileName;
   model.LstCol = new List<ExportDataColumn>();
   model.LstCol.Add(new ExportDataColumn() { prop = "FullName", label = "会员名称" });
   model.LstCol.Add(new ExportDataColumn() { prop = "RealName", label = "真实姓名" });
   model.LstCol.Add(new ExportDataColumn() { prop = "GradeName", label = "会员等级" });
   model.LstCol.Add(new ExportDataColumn() { prop = "Telphone", label = "电话" });
   model.LstCol.Add(new ExportDataColumn() { prop = "AreaName", label = "区域" });
   model.LstCol.Add(new ExportDataColumn() { prop = "GridName", label = "网格" });
   model.LstCol.Add(new ExportDataColumn() { prop = "Address", label = "门牌号" });
   model.LstCol.Add(new ExportDataColumn() { prop = "RegTime", label = "注册时间" });
   model.LstCol.Add(new ExportDataColumn() { prop = "Description", label = "备注" });
   return ExportDataByFore(model);
  }

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

[HttpGet]
  public IHttpActionResult ExportDataByFore(ExportModel dto)
  {
   var dt = JsonConvert.DeserializeObject<DataTable>(dto.Data);
   var fileName = dto.FileName + DateTime.Now.ToString("yyMMddHHmmssfff") + ".xls";
   //设置导出格式
   ExcelConfig excelconfig = new ExcelConfig();
   excelconfig.Title = dto.Title;
   excelconfig.TitleFont = "微软雅黑";
   excelconfig.TitlePoint = 25;
   excelconfig.FileName = fileName;
   excelconfig.IsAllSizeColumn = true;
   //每一列的设置,没有设置的列信息,系统将按datatable中的列名导出
   excelconfig.ColumnEntity = new List<ColumnEntity>();
   //表头
   foreach (var col in dto.LstCol)
   {
    excelconfig.ColumnEntity.Add(new ColumnEntity() { Column = col.prop, ExcelColumn = col.label });
   }
   //调用导出方法
   var stream = ExcelHelper.ExportMemoryStream(dt, excelconfig); // 通过NPOI形成将数据绘制成Excel文件并形成内存流
   var browser = String.Empty;
   if (HttpContext.Current.Request.UserAgent != null)
   {
    browser = HttpContext.Current.Request.UserAgent.ToUpper();
   }
   HttpResponseMessage httpResponseMessage = new HttpResponseMessage(HttpStatusCode.OK);
   httpResponseMessage.Content = new StreamContent(stream);
   httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); // 返回类型必须为文件流 application/octet-stream
   httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") // 设置头部其他内容特性, 文件名
   {
    FileName =
     browser.Contains("FIREFOX")
      ? fileName
      : HttpUtility.UrlEncode(fileName)
   };
   return ResponseMessage(httpResponseMessage);
  }

3. web api 的CORS配置

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

Vue+axios+WebApi+NPOI导出Excel文件实例方法

四、总结

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

Javascript 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
js实现随机8位验证码
Jul 24 #Javascript
Vue中全局变量的定义和使用
Jun 05 #Javascript
详解express使用vue-router的history踩坑
Jun 05 #Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 #Javascript
用webpack4开发小程序的实现方法
Jun 04 #Javascript
JS实现的对象去重功能示例
Jun 04 #Javascript
JS数组中对象去重操作示例
Jun 04 #Javascript
You might like
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
如何实现JS函数的重载
2006/09/22 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
python获取指定时间差的时间实例详解
2017/04/11 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python 带时区的日期格式化操作
2020/10/23 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server