前端调用后端接口下载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();//表单提交即可下载!
}
posted @ 2021-01-19 22:44  橙一万  阅读(2499)  评论(0编辑  收藏  举报