前端调用后端接口下载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();//表单提交即可下载!
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案。马上就...
    菲菲菲菲妞阅读 936评论 0 3
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,606评论 0 7
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,184评论 0 0
  • JavaScript 介绍js的基本数据类型。 Undefined、Null、Boolean、Number、St...
    cuikangjie阅读 480评论 0 3
  • 前言:为什么要了解历史 以铜为鉴,可以正衣冠 ,以人为鉴,可以明得失,以史为鉴,可以知兴替(李世民)。如果说我看得...
    檀越_bbf2阅读 5,296评论 3 7