好的，以下是一个用 Vue、Element UI 和
SpringBoot
EasyExcel 实现的
前端下载文件的
按钮的示例代码：
1. 在 Vue 组件中，定义一个
下载文件的方法：
```javascript
<template>
<div>
<el-button type="primary" @click="downloadFile">
下载文件</el-button>
</div>
</template>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
export default {
methods: {
downloadFile() {
axios({
url: '/api/download',
method: 'get',
responseType: 'blob', // 设置
响应类型为二进制流
}).then((res) => {
const blob = new Blob([res.data], {
type: res.headers['content-type'], // 根据
响应头获取
文件类型
});
const fileName = res.headers['content-disposition'].split('=')[1]; // 根据
响应头获取
文件名
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
window.URL.revokeObjectURL(url);
}).catch((error) => {
Message.error('
下载文件失败！');
console.error(error);
});
},
},
};
</script>
```
2. 在
SpringBoot 的 Controller 中，编
写一个
下载文件的
接口：
```java
@RestController
@RequestMapping("/api")
public class FileController {
@GetMapping("/download")
public ResponseEntity<byte[]> download
Excel() throws IOException {
// 使用
EasyExcel 生成
Excel 文件
String fileName = "test.xlsx";
List<List<Object>> data = new ArrayList<>();
data.add(Arrays.asList("姓名", "年龄", "性别"));
data.add(Arrays.asList("张三", 18, "男"));
data.add(Arrays.asList("李四", 20, "女"));
ByteArrayOutputStream out = new ByteArrayOutputStream();
ExcelWriter writer =
EasyExcel.write(out).build();
WriteSheet sheet =
EasyExcel.writerSheet(0, "sheet1").build();
writer.write(data, sheet);
writer.finish();
// 构造
响应体
byte[] bytes = out.toByteArray();
HttpHeaders headers = new HttpHeaders();
headers.setContentDispositionFormData("attachment", fileName);
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
}
}
```
在以上代码中，我们使用
EasyExcel 生成一个测试用的
Excel 文件，并将其
写入一个 ByteArrayOutputStream 中。然后，我们构造一个 ResponseEntity 对象，将 ByteArrayOutputStream 中的数据作为
响应体，设置
响应头中的 Content-Disposition 和 Content-Type，最后
返回 ResponseEntity 对象。
这样，当用户
点击前端的“
下载文件”
按钮时，就会向后端发送一个 GET 请求，后端
返回的
响应就是一个
文件下载。
前端通过 Blob 对象和 URL.createObjectURL() 方法将
响应体转换为一个可
下载的
文件，然后构造一个 a 标签进行
下载。
6550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
