前端调用后端接口下载excel文件「亲测可用」
今天有一个导出Excel的需求,因为之前做的都是前后端分离的项目,前端代码压根就不用考虑,后台只管接收参数,返回数据流就ok了。但是这次前后端不分离的项目就踩了坑。
因为我之前看过相关教程,前端可以直接通过window.location.href = '接口地址'
将Excel下载下来,但是这种方式有个很大的弊端,只能发送get请求。如果说我们需要对数据进行模糊查询后导出,就无法实现了。
不过在经过了我一番百度之后,找到了解决方法......
前端导出Excel的方式
1.window.location.href = '接口地址
- 缺点:无法发送post请求
2.利用隐藏表单解决(这里用的是JQuery的方法,所以使用的时候要记得引入JQuery)
// 导出,使用这种方式可以,使用ajax请求不可以导出excel
function exportExcel(){
let form = $("<form>"); //创建form标签
form.attr("style","display:none");
form.attr("method","post");//设置请求方式
form.attr("action","${base}/kdOrder/exportExcel"); //action属性设置请求路径
$("body").append(form); //页面添加form标签
//订单号输入框
let orderNo = $("<input>") //创建input标签
orderNo.attr("type","hidden") //设置隐藏域
orderNo.attr("name","orderNo") //设置发送后台数据的参数名
orderNo.attr("value",$('#selectOrder').val().trim());
form.append(orderNo);
form.submit();//表单提交即可下载!
}