美文网首页
前端调用后端接口下载excel文件「亲测可用」

前端调用后端接口下载excel文件「亲测可用」

作者: 橙一万 | 来源:发表于2020-04-20 12:52 被阅读0次

    今天有一个导出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();//表单提交即可下载!
    }
    

    相关文章

      网友评论

          本文标题:前端调用后端接口下载excel文件「亲测可用」

          本文链接:https://www.haomeiwen.com/subject/alhrihtx.html