EasyExcel导出数据到Excel，浏览器提供下载

        最近的一个项目需求，需要为用户提供一个导出数据功能，点击批量下载按钮，将所选中的数据导入到Excel文档中供用户下载。如下图

点击批量下载报告后，浏览器提供下载功能

下面提供一下实现该功能的思路

 后端：

对于数据的处理，我使用的是Alibaba提供的EasyExcel组件，十分感谢这些大佬造的轮子，方便了我这种初学者学习与使用！地址链接:写excel · 语雀 (yuque.com)

首先需要导入依赖

<!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>easyexcel</artifactId>
			<version>2.2.10</version>
		</dependency>

下面是我的Controller代码

/**
     *  批量下载
     */
    @PostMapping("download")
//    @RequiresPermissions("mt:plan:download")
    public R download(HttpServletResponse response,@RequestBody String[] ids) throws IOException {
        List<PlanEntity> list = planService.selectByIds(ids);
        log.warn("获取数据:\n"+list);
        String fileName=new String("学生表.xlsx".getBytes(), StandardCharsets.UTF_8)+new SimpleDateFormat().format(new Date());
        response.setContentType("application/vnd.ms-excel");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Content-Disposition","attachment;fileName="+fileName);
        EasyExcel.write(response.getOutputStream(),PlanEntity.class)
                .sheet("test")
                .doWrite(list);
        log.info("导出数据:\n"+list);
        return R.ok().put("fileName",fileName);
    }

EasyExcel.write(response.getOutputStream(),PlanEntity.class)
                .sheet("test")
                .doWrite(list);

其中response.getOutputStream()是表示字节流输出，PlanEntity.class对应的是数据库字段的映射类：Sheet("")是为下载后的工作表取一个名字，doWrite(list)是将获取的列表数据交给组件处理。

---

对应的实体类需要在每个属性上加上一个注解，@ExcelProperty("xxx")，如图

public class PlanEntity implements Serializable {
	private static final long serialVersionUID = 1L;

	@ExcelProperty("编号")
    private String mtId;

至此，前端调用后端提供的接口就会返回数据回去；我们还需要在前端写一个下载按钮提供下载

前端:

//批量下载
export function downloadExcel (blobPart, filename) {
  const blob = new Blob([blobPart], { type: 'application/vnd.ms-excel' })
  console.log('downloadExcel', blob.size)
  // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
  const elink = document.createElement('a')
  elink.download = decodeURIComponent(filename)
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href) // 释放URL 对象
  document.body.removeChild(elink)
}

    发送请求时，需要带上responseType: 'blob'

this.$http({
          url: this.$http.adornUrl("/mt/plan/download"),
          method: "post",
          data: this.$http.adornData(ids, false),
          responseType: 'blob'
}
 downloadExcel(data, this.getFileName());

    到这里前后端就写完了，当我们点击批量下载后，我们可以将2下载文件存在我们电脑上的任意一个位置。

如有疑问，欢迎探讨指正！