码迷,mamicode.com
首页 > 其他好文 > 详细

前端导出Excel不跳转页面

时间:2018-04-02 18:05:31      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:方式   div   出现   ons   a标签   form   form表单   跳转页面   append   

页面导出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不跳转页面

标签:方式   div   出现   ons   a标签   form   form表单   跳转页面   append   

原文地址:https://www.cnblogs.com/dingziDone/p/8695517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!