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

时间:2022-02-12 13:51:31

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

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

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

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

var tempForm = $('<form action="/gate/customer/export/shopsCustomer.php" target="hiddenIframe"></form>');
$('body', document).append(tempForm);
tempForm.submit();

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

  附图:头信息的变化

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







  友情链接:井田商学院