帮我写一个基于springboot,vue2,easyexcel的导出百万数据的前后端代码
时间: 2024-02-17 16:04:17 浏览: 82
好的,下面是一个基于 Spring Boot、Vue2 和 EasyExcel 的导出百万数据的前后端代码示例:
后端代码:
1. 引入 EasyExcel 和相关依赖
```xml
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.3.0</version>
</dependency>
```
2. 定义数据实体类
```java
public class User {
private Long id;
private String name;
private Integer age;
// 省略 getter 和 setter 方法
}
```
3. 编写导出数据的接口
```java
@RestController
@RequestMapping("/api")
public class UserController {
@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
// 查询需要导出的数据
List<User> userList = userService.getUserList();
// 设置响应头信息
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("用户数据.xlsx", "UTF-8"));
// 使用 EasyExcel 进行数据导出
ExcelWriter excelWriter = new ExcelWriter(response.getOutputStream(), ExcelTypeEnum.XLSX, true);
WriteSheet writeSheet = EasyExcel.writerSheet(0, "用户数据").head(User.class).build();
excelWriter.write(userList, writeSheet);
excelWriter.finish();
}
}
```
前端代码:
1. 安装 axios 和 file-saver
```bash
npm install axios file-saver --save
```
2. 创建导出按钮和导出方法
```vue
<template>
<div>
<button @click="exportData">导出数据</button>
</div>
</template>
<script>
import axios from 'axios'
import { saveAs } from 'file-saver'
export default {
methods: {
exportData() {
axios({
method: 'get',
url: '/api/export',
responseType: 'blob'
}).then(response => {
saveAs(response.data, '用户数据.xlsx')
})
}
}
}
</script>
```
以上代码仅供参考,具体实现需要根据实际情况进行调整。
阅读全文