VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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配置

    // 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属性,进行以下配置

    四、总结

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

    您可能感兴趣的文章:

    • vue.js中导出Excel表格的案例分析
    • 详解如何在Vue项目中导出Excel
    • Vue结合后台导入导出Excel问题详解
    • vue中导出Excel表格的实现代码
    • vue+springmvc导出excel数据的实现代码
    • Vue实现导出excel表格功能
    • vue2.0 + element UI 中 el-table 数据导出Excel的方法
    • Vue导出json数据到Excel电子表格的示例
    • Vue2.0实现将页面中表格数据导出excel的实例
    • vue+element表格导出为Excel文件

    广而告之:
    热门推荐:
    PHP实现导出带样式的Excel

    工作中做导出的时候,需要导出自定义的表格或嫌弃导出的Excel格式太难看了。 需要设置颜色、字号大小、加粗、合并单元格等等。 效果图: PHP代码: /** * 导出文件 * @return string */ public function export() { $file_name = "成绩单-".date("Y-m-d H:i:s",time()); $fi···

    Fleaphp常见函数功能与用法示例

    本文实例讲述了Fleaphp常见函数功能与用法。分享给大家供大家参考,具体如下: 1. FLEA_Db_TableDataGateway::update()用法: 例如:修改一条 uid=22 的记录, name字段改成"11", pass字段改成"22",就要这样写: $data = array('uid'=>22,'name'=>11,'pass'=>22); $ta···

    php计算到指定日期还有多少天的方法

    本文实例讲述了php计算到指定日期还有多少天的方法。分享给大家供大家参考。具体如下: function countdays($d) { $olddate = substr($d, 4); $newdate = date(Y) ."".$olddate; $nextyear = date(Y)+1 ."".$olddate; if($newdate > date("Y-m-d")) { $start_ts =···

    Ionic2开发环境搭建教程

    关于网络环境:ionic开发环境不需要FQ。我这里没有设置FQ,亲测可行。但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败。 建议大家在搭建开发环境的时候,不要参考百度出来的各种博客,太零碎,重要的是时间久,也不一定写的对。强烈建议参考官网引导教程。htt···

    通过一次报错详细谈谈Point事件

    前言 这篇文章在草稿箱里躺了很久,因为最近又遇到了相关问题,于是又整理了一下。请注意这里讲的不是 css 的 pointer-events。下面话不都说了,来一起看看详细的介绍吧。 起因 从某个月黑风高的晚上开始,有人发现我们的 web-app 在 Chrome 模拟器里开始出现报错,报错信息大···

    浅谈HTML5新增和废弃的标签

    一、废弃的标签 以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了。 1、能用CSS代替的元素 这些元素包含basefont、big、center、font、s、stri···

    php采集文章中的图片获取替换到本地(实现代码)

    复制代码 代码如下:/** * 获取替换文章中的图片路径 * @param string $xstr 内容 * @param string $keyword 创建照片的文件名 * @param string $oriweb 网址 * @return string *  */function replaceimg($xstr,$keyword, $oriweb){ ···

    php连接MySQL的两种方式对比

    记录一下PHP连接MySQL的两种方式。 先mock一下数据,可以执行一下sql。 /*创建数据库*/ CREATE DATABASE IF NOT EXISTS `test`; /*选择数据库*/ USE `test`; /*创建表*/ CREATE TABLE IF NOT EXISTS `user` ( name varchar(50), age int ); /*插入测试数据*/ INSERT INTO ···

    php批量转换文件夹下所有文件编码的函数类

    函数代码: <?php /** * 把一个文件夹里的文件全部转码 只能转一次 否则全部变乱码 * @param string $filename */ function iconv_file($filename,$input_encoding='gbk',$output_encoding='utf-8') { if(file_exists($filename)) { if(is_dir($filename))···

    微信小程序+腾讯地图开发实现路径规划绘制

    现象 我们想用微信小程序实现在map>组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的, 更糟糕的是即便你内置微信小程序JavaScript SDK,它目前为···