vue+easyexcel导入

最新推荐文章于 2024-11-04 22:43:08 发布

never__stop

最新推荐文章于 2024-11-04 22:43:08 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/never__stop/article/details/115232518

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Vue项目中如何利用EasyExcel导出数据。由于Vue的axios不适用于导出请求，因此采用表单提交方式来发送POST请求。通过创建隐藏的form元素，设置action、target和method属性，并将参数转化为textarea添加到form中，然后提交表单实现数据导出。示例代码展示了具体的实现过程，对于初学者具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用vue+easyexcel实现导出数据
注意，在vue中不能直接使用axios的方式去发送一个请求进行导出；需要使用表单提交方式进行发起，如下图
在这里插入图片描述
在图中，需要传递两个参数，一个url访问地址，一个查询的参数，发送表单提交请求，即可导出数据
对应代码如下：
post(url, params) {
// 创建form元素
var temp_form = document.createElement(“form”);
// 设置form属性
temp_form .action = url;
temp_form .target = “_self”;
temp_form .method = “post”;
temp_form .style.display = “none”;
// 处理需要传递的参数
for (var x in params) {
var opt = document.createElement(“textarea”);
opt.name = x;
opt.value = params[x];
temp_form .appendChild(opt);
}
document.body.appendChild(temp_form);
// 提交表单
temp_form .submit();
},
exportTeacher(){
var url= process.env.BASE_API + /eduservice/edu-teacher/exportTeacher;
this.post(url,this.teacherQuery);
}