前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享一个导出Excel时页面不跳转的小技巧

分享一个导出Excel时页面不跳转的小技巧

作者头像
风柏杨4711
发布2021-03-15 10:46:14
7530
发布2021-03-15 10:46:14
举报
文章被收录于专栏:技术小牛

    今天在点击客户档案导出的时候,发现先是打开了一个新标签,然后新标签自动关掉,弹出一个文件下载确认的窗口,点击确认后开始下载导出的Excel文件。这样的过程感觉窗口闪来闪去,而且可能会给用户带来困惑,是一种不好的体验。

    检查了一下代码,发现这跟采用服务端导出数据的处理方式有关系,本身整个过程的原理是客户端用POST方式提交表单到服务端,target属性设为空,服务端查询出要导出的数据并且组织成数组并生成header信息为文件,内容类型为application/vnd.ms-excel的响应信息返回(具体的头信息见附图)。所以这里的原因在于发送导出Excel请求的form中的target属性设置为_blank,这个属性如果不设置,用默认的属性时会导致本身正在访问的页面跳转,是不可行的,那指定到本页面的一个隐藏的iframe里呢?经过试验,果然成功了。

  具体的实现方法,先在导出Excel的页面里加一个隐藏的iframe,示例代码:<iframe src="about:blank" name="hiddenIframe" class="hide"></iframe>

  导出按钮生成的发送请求的表单的示例代码:

代码语言:javascript
复制
var tempForm = $('<form action="/gate/customer/export/shopsCustomer.php" target="hiddenIframe"></form>');
					$('body', document).append(tempForm);
					tempForm.submit();

  注:表单的target属性是与iframe的name属性对应的。

  附图:头信息的变化

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013/07/13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档