前端下载EXCEL文件,后端返回文件流的处理
时间: 2023-08-06 18:19:07 浏览: 147
vue中后端做Excel导出功能返回数据流前端的处理操作
前端下载 Excel 文件,后端需要返回文件流,可以按照以下步骤进行处理:
1. 后端根据前端请求参数,生成 Excel 文件,并将文件流返回给前端。
2. 前端通过 AJAX 发送请求,请求后端生成 Excel 文件的接口。
3. 后端在接收到请求后,使用相关的库(如 Apache POI)生成 Excel 文件,并将文件流返回给前端。
4. 前端在接收到后端返回的文件流后,使用 Blob 对象创建一个 URL,并将该 URL 赋给一个 a 标签的 href 属性。
5. 前端再使用 JavaScript 触发该 a 标签的 click 事件,即可下载 Excel 文件。
以下是一个示例的后端代码,使用了 Spring Boot 和 Apache POI 库:
```java
@GetMapping("/downloadExcel")
public ResponseEntity<byte[]> downloadExcel() throws IOException {
// 创建 Excel 工作簿
Workbook workbook = new XSSFWorkbook();
Sheet sheet = workbook.createSheet("Sheet1");
// 创建表头
Row header = sheet.createRow(0);
header.createCell(0).setCellValue("姓名");
header.createCell(1).setCellValue("年龄");
// 创建数据行
Row dataRow = sheet.createRow(1);
dataRow.createCell(0).setCellValue("张三");
dataRow.createCell(1).setCellValue(20);
// 将 Excel 文件写入字节数组输出流
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
workbook.write(outputStream);
// 设置响应头
HttpHeaders headers = new HttpHeaders();
headers.add("Content-Disposition", "attachment;filename=test.xlsx");
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
// 返回响应实体
return new ResponseEntity<>(outputStream.toByteArray(), headers, HttpStatus.OK);
}
```
在前端中,可以使用以下代码实现下载:
```javascript
axios.get('/downloadExcel', { responseType: 'blob' }).then(res => {
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'test.xlsx'
a.click()
URL.revokeObjectURL(url)
})
```
阅读全文