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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
javascript实现密码强度显示
Mar 18 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
React中的refs的使用教程
Feb 13 Javascript
小程序实现多选框功能
Oct 30 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
javascript实现滚轮轮播图片
Dec 13 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
如何用php获取文件名后缀
2013/06/09 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
详解Python中的Cookie模块使用
2015/07/06 Python
python 重定向获取真实url的方法
2018/05/11 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
微信小程序python用户认证的实现
2019/07/29 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
英文版网络工程师求职信
2013/10/28 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
学习标兵获奖感言
2014/02/20 职场文书
安全生产演讲稿
2014/05/09 职场文书
财务审计整改报告
2014/11/06 职场文书
2014年销售员工作总结
2014/12/01 职场文书
复活读书笔记
2015/06/29 职场文书
Python 全局空间和局部空间
2022/04/06 Python