欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 14:43:52
最近vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用blob方式,这也是大家推荐的一种的方式,特此做下记录。 导出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'配置,这是很重要的

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

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

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