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

今天在点击客户档案导出的时候，发现先是打开了一个新标签，然后新标签自动关掉，弹出一个文件下载确认的窗口，点击确认后开始下载导出的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属性对应的。

附图：头信息的变化

友情链接:井田商学院