一般情况下,我们都是采用get请求的方式导出excel。例如采用如下方式:
var exportUrl = ‘/xxx;‘; window.open(exportUrl);
导出excel所需的逻辑参数拼接到url上即可。
但是,如果我们需要提交大量的参数到后台才能导出excel, 亦或者我们提交的参数中有中文,get提交乱码了,那么就可能想使用post提交的方式来导出excel。因为post提交支持更多的参数,从而能解决get提交对url长度的限制问题。
然而,一般的post提交表单,意味着主页面也会一起刷新,体验较差。那么,这里将提供一个仿异步post提交导出excel的实例。
代码如下:
_export = { canExport:false, post:function(data,exportUrl) { _export.canExport = true; if ($(‘#exportIframe‘).length > 0) { $(‘#exportIframe‘).remove(); } $(‘body‘).append(‘
‘); $(‘#exportIframe‘).load(function() { if (_export.canExport) { var formData = ‘
‘; for (var name in data) { formData = formData + ‘‘; } formData = formData + ‘‘; formData = formData + ‘
‘; $(this).contents().find(‘body‘).append(formData); $(this).contents().find(‘#submitExportForm‘).click(); _export.canExport = false; } }); } }
调用方式:
_export.post(submitData,exportUrl);
注意,这里的submitData是使用jquery构建key:value的form参数对象。传入导出方法后被解析还原成form表单数据。
代码的思路就是,利用隐藏的iframe内嵌模块,在iframe内部post表单提交导出我们想要的数据,页面翻转也仅发生在iframe内部,
我们的主页面并不会发生翻转,从而达到仿异步post导出的效果。
时间: 2024-10-13 07:17:51