最近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文件传到后台,之后就是后台处理文件的逻辑了,这个就不具体写了,因为和以前没区别。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]
 
                     
                    

