vue+springboot實現excel導出
时间: 2023-07-08 19:52:55 浏览: 85
要实现Vue和Spring Boot的Excel导出功能,可以按照以下步骤进行:
1. 在Vue中编写前端页面,包括按钮和表格等元素。
2. 在Vue中编写调用Spring Boot后端接口的函数,将需要导出的数据传递给后端。
3. 在Spring Boot中编写后端接口,接收前端传递的数据,并使用Apache POI库生成Excel文件。
4. 将生成的Excel文件返回给前端。
下面是一个简单的示例代码:
Vue前端代码:
```html
<template>
<div>
<el-button @click="exportExcel">导出Excel</el-button>
<el-table :data="tableData" border>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
exportExcel() {
axios.post('/api/exportExcel', this.tableData).then(response => {
const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' })
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = 'data.xlsx'
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
})
}
}
}
</script>
```
Spring Boot后端代码:
```java
@RestController
@RequestMapping("/api")
public class ExcelController {
@PostMapping("/exportExcel")
public ResponseEntity<byte[]> exportExcel(@RequestBody List<Map<String, Object>> dataList) throws IOException {
// 创建Excel文件
Workbook workbook = new XSSFWorkbook();
Sheet sheet = workbook.createSheet("Sheet1");
Row headerRow = sheet.createRow(0);
headerRow.createCell(0).setCellValue("姓名");
headerRow.createCell(1).setCellValue("年龄");
for (int i = 0; i < dataList.size(); i++) {
Map<String, Object> data = dataList.get(i);
Row dataRow = sheet.createRow(i + 1);
dataRow.createCell(0).setCellValue((String) data.get("name"));
dataRow.createCell(1).setCellValue((Integer) data.get("age"));
}
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
workbook.write(outputStream);
return ResponseEntity.ok().contentType(MediaType.parseMediaType("application/vnd.ms-excel"))
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + "data.xlsx" + "\"")
.body(outputStream.toByteArray());
}
}
```
在这个示例中,我们使用了axios库来发送POST请求,将需要导出的数据传递给后端。后端接收到数据后,使用Apache POI库生成Excel文件,并将文件以字节数组的形式返回给前端。前端通过创建一个<a>元素,并设置其href属性为Excel文件的URL,来实现文件下载功能。
需要注意的是,这个示例中使用的是xlsx格式的Excel文件,如果需要生成xls格式的文件,可以将XSSFWorkbook改为HSSFWorkbook,同时将响应头的Content-Type改为"application/vnd.ms-excel"。