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

 更新时间:2019年02月19日 10:04:12   作者:第二庄  
这篇文章主要介绍了Vue结合后台导入导出Excel问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近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'配置,这是很重要的

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

可以看到请求返回了一个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前后端代码了。

导入Excel功能

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

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

相关文章

  • elementUI动态嵌套el-form表单校验举例详解

    elementUI动态嵌套el-form表单校验举例详解

    最近工作遇到个需求,表单可以进行增加删除操作,需要进行表单校验,这篇文章主要给大家介绍了关于elementUI动态嵌套el-form表单校验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue中的slot-scope及scope.row用法

    vue中的slot-scope及scope.row用法

    这篇文章主要介绍了vue中的slot-scope及scope.row用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中使用Animate.css的教程详解

    vue中使用Animate.css的教程详解

    Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以,下面我们就来看看如何在vue项目中使用Animate.css吧
    2023-08-08
  • 手把手教你使用electron将vue项目打包成exe

    手把手教你使用electron将vue项目打包成exe

    Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,下面这篇文章主要给大家介绍了关于如何使用electron将vue项目打包成exe的相关资料,需要的朋友可以参考下
    2023-01-01
  • Vue点击切换颜色的方法

    Vue点击切换颜色的方法

    今天小编就为大家分享一篇Vue点击切换颜色的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3.x使用swiperUI动态加载图片失败的解决方法

    vue3.x使用swiperUI动态加载图片失败的解决方法

    这篇文章主要为大家详细介绍了vue3.x使用swiperUI动态加载图片失败的解决方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue中html2canvas给指定区域添加满屏水印

    vue中html2canvas给指定区域添加满屏水印

    本文主要介绍了vue中html2canvas给指定区域添加满屏水印,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • vue实现横屏滚动公告效果

    vue实现横屏滚动公告效果

    这篇文章主要为大家详细介绍了vue实现横屏滚动公告效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue 组件开发原理与实现方法详解

    vue 组件开发原理与实现方法详解

    这篇文章主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下
    2019-11-11
  • vue-meta实现router动态设置meta标签的方法

    vue-meta实现router动态设置meta标签的方法

    这篇文章主要介绍了vue-meta实现router动态设置meta标签,实现思路非常简单内容包括mata标签的特点和mata标签共有两个属性,分别是http-equiv属性和name属性,本文通过实例代码给大家详细讲解需要的朋友可以参考下
    2022-11-11

最新评论