easyexcel vue3导出下载

Vue3 中使用 EasyExcel 实现导出下载功能
定义要下载的表格模板
为了实现在 Vue3 项目中通过 EasyExcel 进行 Excel 文件的导出，在前端需先定义好待导出的数据结构以及样式等内容。这通常涉及到创建一个与后端约定好的数据模型，以便于前后端之间能够顺利交互。
控制类配置
在 Spring Boot 后端部分，需要编写相应的控制器来处理来自前端的请求，并返回给客户端生成后的文件流。此过程涉及到了解 HTTP 协议中的响应头设置，确保浏览器能识别这是一个可供下载的内容[^1]。
@RestController
@RequestMapping("/system/user")
public class UserController {

@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
// 设置响应头信息
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
String fileName = URLEncoder.encode("用户信息", "UTF-8").replaceAll("\\+", "%20");
response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");

// 创建写对象
EasyExcel.write(response.getOutputStream(), User.class)
.sheet("用户列表")
.doWrite(data());
}

private List<User> data() {
ArrayList<User> list = new ArrayList<>();
for (int i = 0; i < 10; i++) {
User user = new User();
user.setId(i);
user.setName("姓名_" + i);
user.setAge((byte)(i % 5));
list.add(user);
}
return list;
}
}
登录后复制
前端页面组件开发
对于 Vue3 来说，则是在对应的 .vue 组件里加入用于触发导出操作的方法逻辑。这里展示了如何利用 axios 发起 GET 请求获取服务器上的资源链接，并最终促使浏览器自动下载该文档[^2]。
<template>
<div id="app">
<!-- 添加导出按钮 -->
<el-button type="warning" icon="el-icon-download" @click="handleExport">导出</el-button>
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';

const handleExport = () => {
const url = '/system/user/export'; // 对应的服务接口地址
axios({
method: 'GET',
url,
responseType: 'blob', // 显式指明这是二进制大对象形式的数据
}).then(res => {
let blob = res.data;
let linkElement = document.createElement('a');
try {
let href = window.URL.createObjectURL(blob); // 将 Blob 数据转换成 URL 地址
linkElement.href = href;
linkElement.download = "用户信息.xlsx"; // 自定义下载下来的文件名
document.body.appendChild(linkElement);
linkElement.click(); // 执行点击事件模拟用户的实际行为从而启动下载流程
} finally {
// 清理工作防止内存泄漏
window.URL.revokeObjectURL(href);
document.body.removeChild(linkElement);
}
});
};
</script>
登录后复制
处理 CSV 格式的特殊需求
如果想要支持除了默认 XLSX 之外其他类型的电子表格比如 CSV ，那么只需要调整服务端代码片段里的参数传递方式即可完成格式切换。值得注意的是当遇到中文字符集问题时可能还需要额外指定编码规则以避免出现乱码现象[^3]。
EasyExcel.write(fileName, DemoData.class)
.excelType(ExcelTypeEnum.CSV)
.charset(Charset.forName("GBK"))
.sheet("模板")
.doWrite(() -> {/* ... */});
登录后复制