基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程

**导出Excel文件的前后端完整过程**

在实际项目中，经常需要将数据导出为Excel文件供用户下载。下面我们将基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程。

###1. 后端配置首先，我们需要在后端配置好EasyExcel和Blob相关的依赖。

xml<dependency>
 <groupId>com.alibaba</groupId>
 <artifactId>easyexcel</artifactId>
 <version>2.3.4</version>
</dependency>

<dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.8.0</version>
</dependency>

java@RestController@RequestMapping("/api")
public class ExportController {

 @GetMapping("/export")
 public void exportExcel(HttpServletResponse response) {
 // 创建EasyExcel对象 EasyExcelFactory easyExcel = new EasyExcelFactory();
 // 设置导出文件名称和类型 String fileName = "用户信息.xlsx";
 String fileType = ".xlsx";
 // 设置导出数据 List users = getUsers(); // 获取用户列表 // 导出Excel try {
 easyExcel.export(response, fileName, fileType, users);
 } catch (Exception e) {
 log.error("导出Excel失败", e);
 }
 }

 private List getUsers() {
 // 模拟获取用户列表 return Arrays.asList(
 new User(1, "张三"),
 new User(2, "李四")
 );
 }
}

bashnpm install vue axios

javascript// 导出Excel按钮点击事件exportExcel() {
 // 发送请求获取导出数据 this.$axios.get('/api/export')
 .then(response => {
 // 获取Blob对象 const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
 // 下载Excel文件 const url = URL.createObjectURL(blob);
 window.location.href = url;
 })
 .catch(error => {
 console.error(error);
 });
}

javascript// axios配置axios.defaults.baseURL = ' />