Vue结合后台导入导出Excel问题详解


Posted in Javascript onFebruary 19, 2019

最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录。

导出Excel功能

这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的。

下面具体看一下后台的代码:

/**
  * 批量导出用户
  * @param condition
  * @param response
  */
@PostMapping("/exportUser")
public void exportUser(@RequestBody UserQueryCondition condition,HttpServletResponse response){
 XSSFWorkbook book = new XSSFWorkbook();
 try {
  List<UserParam> list = indexService.exportUser(condition);
  if (list != null && list.size() > 0) {
   XSSFSheet sheet = book.createSheet("mySheent");
   String[] vals = {"用户ID", "邮箱账号","昵称","年龄","性别","状态", "注册时间"};
   createExcel(sheet, 0, vals);
   for (int i = 0; i < list.size(); i++) {
    UserParam entity = list.get(i);
    String[] vals2 = new String[]{String.valueOf(entity.getId()), entity.getEmail(), entity.getName(), String.valueOf(entity.getAge()),
            entity.getSex() == 0 ? "女":"男",entity.getRemoved() == 0 ? "启用":"禁用",entity.getRegisterDate()};
    createExcel(sheet, i + 1, vals2);
   }

   book.write(generateResponseExcel("用户列表",response));
  }
  book.close();
 }catch(Exception e){
  e.printStackTrace();
 }
}
/**
  * @param excelName
  *   要生成的文件名字
  * @return
  * @throws IOException
  */
private ServletOutputStream generateResponseExcel(String excelName, HttpServletResponse response) throws IOException {
 excelName = excelName == null || "".equals(excelName) ? "excel" : URLEncoder.encode(excelName, "UTF-8");
 response.setContentType("application/vnd.ms-excel;charset=utf-8");
 response.setHeader("Content-Disposition", "attachment; filename=" + excelName + ".xlsx");

 return response.getOutputStream();
}

对于第一个函数exportUser来说,主要是根据传回来的条件查询数据库并生成相应的Excel表格,之后book.write(generateResponseExcel(“用户列表”,response)); 这行代码调用第二个函数generateResponseExcel来生成流文件以及处理返回的Response。

这里需要注意的地方就两个:

response.setContentType("application/vnd.ms-excel;charset=utf-8");
response.setHeader("Content-Disposition", "attachment; filename=" + excelName + ".xlsx");

第一行application/vnd.ms-excel说明将结果导出为Excel

第二行说明提供那个打开/保存对话框,将文件作为附件下载

上面就是后台的全部代码了,接下来看一下前端的代码:

axios({
  method: 'post',
  url: 'http://localhost:19090/exportUser',
  data: {
   email: this.email,
   userIdArray: this.userIdArray,
   startRegisterDate: this.registerStartTime,
   endRegisterDate: this.registerEndTime
  },
  responseType: 'blob'
  }).then((res) => {
  console.log(res)
  const link = document.createElement('a')
  let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob);
  let num = ''
  for(let i=0;i < 10;i++){
   num += Math.ceil(Math.random() * 10)
  }
  link.setAttribute('download', '用户_' + num + '.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  }).catch(error => {
  this.$Notice.error({
   title: '错误',
   desc: '网络连接错误'
  })
  console.log(error)
  })

这里为了方便做记录,我是直接在页面中使用axios发送了个post请求。

仔细看axios请求加了个responseType: 'blob'配置,这是很重要的

可以看一下请求成功之后返回的数据:

Vue结合后台导入导出Excel问题详解

可以看到请求返回了一个Blob对象,你如果没有正确的加上responseType: 'blob'这个参数,返回的就不是个Blob对象,而是字符串了。

接下来就是将返回的Blob对象下载下来了:

const link = document.createElement('a')
  let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob);
  let num = ''
  for(let i=0;i < 10;i++){
   num += Math.ceil(Math.random() * 10)
  }
  link.setAttribute('download', '用户_' + num + '.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)

上面这段代码重要的就一句:let blob = new Blob([res.data],{type: ‘application/vnd.ms-excel'});

其余的看看就行了。

Vue结合后台导入导出Excel问题详解

以上就是全部的Vue导出Excel前后端代码了。

导入Excel功能

其实对于这个导入Excel没有什么好说的,就和你没采用前后分离时使用SpringMVC导入Excel表格一样。Vue前端导入Excel代码和Vue上传图片的代码没有区别,就是将Excel文件传到后台,之后就是后台处理文件的逻辑了,这个就不具体写了,因为和以前没区别。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 #Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 #Javascript
小程序转发探索示例
Feb 19 #Javascript
JS异步执行结果获取的3种解决方式
Feb 19 #Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
基于node.js实现爬虫的讲解
Feb 18 #Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 #Javascript
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
实用函数7
2007/11/08 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
Laravel实现表单提交
2017/05/07 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Django中间件工作流程及写法实例代码
2018/02/06 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
家长评语大全
2014/01/22 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
Python图像处理库PIL详细使用说明
2022/04/06 Python