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文件传到后台,之后就是后台处理文件的逻辑了,这个就不具体写了,因为和以前没区别。

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

相关文章

  • Vue如何动态修改el-table的某列数据

    Vue如何动态修改el-table的某列数据

    这篇文章主要介绍了Vue如何动态修改el-table的某列数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue cli安装使用less的教程详解

    vue cli安装使用less的教程详解

    这篇文章主要介绍了vue-cli安装使用less的教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 写一个Vue Popup组件

    写一个Vue Popup组件

    这篇文章主要介绍了写一个Vue Popup组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • vue-cli如何引入bootstrap工具的方法

    vue-cli如何引入bootstrap工具的方法

    本篇文章主要介绍了vue-cli如何引入bootstrap工具的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue+iview写个弹框的示例代码

    vue+iview写个弹框的示例代码

    本篇文章主要介绍了vue+iview写个弹框的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • VUE脚手架具体使用方法

    VUE脚手架具体使用方法

    这篇文章主要介绍了VUE脚手架具体使用方法,vue-cli这个构建工具大大降低了webpack的使用难度,小编觉得不错,下面就一起来了解一下具体使用方法
    2019-05-05
  • Vue加载json文件的方法简单示例

    Vue加载json文件的方法简单示例

    这篇文章主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo

    解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo

    这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-06-06
  • vue网络请求方案原生网络请求和js网络请求库

    vue网络请求方案原生网络请求和js网络请求库

    这篇文章主要为大家介绍了网络请求方案原生网络请求和js网络请求库的过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2021-11-11
  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    这篇文章介绍了Vue.js中v-for指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03

最新评论