前端导出Excel不跳转页面

Posted 钉子杂论

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端导出Excel不跳转页面相关的知识,希望对你有一定的参考价值。

页面导出Excel有三种方式:

1.第一种方式比较简单,a标签,直接在href中写下载地址及参数,页面将会跳转到地址,然后下载,这种方式很大的弊端,跳转页面

 例如: <a   href="health/teaManage/indicatorListUpload?page=1&pageLength=40 "></a>
 
2.通过window.open,通过js打开新页面,下载完关闭页面,这种方式打开新页面,用户会有页面闪烁感觉,体验不太好
let url = health/teaManage/indicatorListUpload?page=1&pageLength=40;
window.open(url);
 
3通过提交form表单方式.这个方法页面将不会出现跳转,直接在本页面下载,用户体验比较好
具体的实现方法,先在导出Excel的页面里加一个隐藏的iframe,示例代码:<iframe src="about:blank" name="hiddenIframe" class="hide"></iframe>
点击导出按钮,运行js函数,提交表单。表单的target属性是与iframe的name属性对应的
form中的target属性设置为_blank,这个属性如果不设置,用默认的属性时会导致本身正在访问的页面跳转,是不可行的,
let page = 1;
let pagelen = 20;
var tempForm = $(‘<form action="‘+Config.api+this.inUrl+‘Upload?" type="get" target="hiddenIframe">‘
                     +‘<input  type="hidden"  value="‘+page+‘" name="page"/>‘
                     +‘<input  type="hidden"  value="‘+pagelen+‘" name="pagelen"/>‘
                     +‘</form>‘);
 $(‘body‘, document).append(tempForm);
 tempForm.submit();
 
注意:

以上是关于前端导出Excel不跳转页面的主要内容,如果未能解决你的问题,请参考以下文章

TreeView点击相应的节点为啥不跳转

asp中如何使表单提交数据后不跳转到该页面?

jsp 如何实现提交表单 但不跳转到提交页面

360浏览器打开页面不跳转到新页面

nodejs怎么在页面跳转的时候,浏览器地址不跳转

nodejs怎么在页面跳转的时候,浏览器地址不跳转