jquery.fileDownload.min.js插件用于excel导出实现加载中动画功能

最新推荐文章于 2024-03-17 09:49:23 发布

qq_42750608

最新推荐文章于 2024-03-17 09:49:23 发布

阅读量1k

点赞数

文章标签： excel插件加载中出现消失问题 jquery.fileDownload.min.js

本文链接：https://blog.csdn.net/qq_42750608/article/details/89881319

版权

前端页面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../../js/common/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导出动画功能</title>
<style>
*{
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	background: rgb(241, 241, 241); 
}

input {
	width: 160px;
	height: 30px;
	border: 1px solid #ddd;
	border-radius: 0px;
}

form#handle-search {
	min-height: 50px;
}

form#handle-search>div {
	display: inline-block;
	margin-right: 10px;
	margin-top: 20px;
}

h1 {
	font-size: 16px;
	font-weight: 600;
}

article {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
#display {
	width:100%;
	flex: 1;
	display:flex;
}

.gap-col {
	width:100%;
	height:10px;
}

#aside {
	width:200px;
	height:100%;
	border: 1px solid #ddd;
}

.gap {
	width: 10px;
 	height: 100%;
}

#chart {
	flex: 1;
	height: 100%;
	border: 1px solid #ddd;
}

#tb {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
	border-bottom: 1px solid #bbb;
	box-shadow: 0 0 1px 2px #ddd;
}
a.l-btn:hover {
	background: rgb(79,107,138);
	color: #fff;
}
</style>
</head>
<body>
	<article class="easyui-layout" data-option="fit:true;">
		<nav id="tb">
			<div>
				<label>查询日期</label> 
				<input class="easyui-datebox" id="date" data-options="width:160,height:35,required:true,editable:true,validType:'MDtimes'" />
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searching()">查询</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-redo" onclick="redo()">重置</a>
			</div>
			<div style="height:10px;"></div>
			<div>
				<label>导出月份</label> 
				<input class="easyui-datebox" id="month" data-options="width:160,height:35,required:true,editable:true,validType:'Monthtimes',value: new Date().getFullYear()+'-'+(new Date().getMonth()+1)" /> 			
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="doExcel()"><i class="fas fa-file-export"></i>&nbsp;导出</a> 
			</div>
		</nav>
		<section class="gap-col"></section>
		<!-- 图表 -->
		<section id="display">
			<iframe id="chart" src="./chart.jsp"></iframe>
		</section>
		<section class="gap-col"></section>
	</article>
	<div id="loading"
		style="background-color:rgb(0,0,0,0.1);display:none;
			position:fixed;top: 0;bottom:0;left:0;right:0;margin:auto;display:flex;align-items:center;
			z-index:10000;">
		<img src="./loading-2.gif"
		style="width: 5%;height:auto;display:block;margin: 0 auto;"/>
	</div>
</body>
<script type="text/javascript" src="./plugin.js"></script>
<script src="http://jqueryfiledownload.apphb.com/Scripts/jquery.fileDownload.js"></script>
<script>
	//导出
	function doExcel() {
		//不能超过当月
		var start = $().showplugin('formatDateTime',new Date());
		var pattern = /\d{4}-\d{2}/;
		start = pattern.exec(start)[0]+'-01 00:00:00';
		var end = $('#month').datebox('getValue')+'-01 00:00:00';
		var limit = 1*29*24*60*60*1000;
		//月份
		var m = new Date().getMonth()+1;
		if(m == 2) {//判断闰年和非闰年2月份的时间限制
			limit = $().showplugin('isLeapYear',start.split('-')[0]);
		}
		
		else if(m == 1 || m == 3 || m == 5 || m == 7 || m == 8
		|| m == 10 || m == 12) {
			limit = 1*30*24*60*60*1000;
		}
		if($().showplugin('checkDay',{"start":start,"end":end,"limit":limit,"alert":"导出时间不能超过当月"}) === false) {
			return;
		}
		else {
			//导出交互
			var url = 'productionDetailAction_aaa.action';
			time = $('#month').datetimebox('getValue');//导出月份
			//window.location.href = url + "?time=" + time;
			
			exportFileByForm(url,time);
			
		}
	}
	
	
	//导出插件方法
	function exportFileByForm(url,time){
	    var mform = document.getElementById('file_export_form') ;
	    if(mform){
	          document.body.removeChild(mform) ;
	    }
	    mfrom = document.createElement("form");
	    mfrom.id = "file_export_form" ;
	    mfrom.target="_blank" ;
	    mfrom.method="post" ;
	    mfrom.action=url;
	    mfrom.style.display="none" ;
	    
	    var ipt_time = document.createElement("input");
	    ipt_time.type = "hidden";
	    ipt_time.name = "time";
	    ipt_time.value = time ;
	
	    mfrom.appendChild(ipt_time);
	    document.body.appendChild(mfrom);
	    
		var loading = document.getElementById('loading');
		
	    $.fileDownload(url,{
		    httpMethod: 'GET',
		    data:$('#file_export_form').serializeArray(),
		    preparingHtml: '正在加载文件.请稍后。。。',
		    failMessageHtml: '文件下载失败!请联系管理员',
		    prepareCallback:function(res){
		    	console.log(res);
		    	$(loading).show();
		    },
		    abortCallback:function(res){
		    	console.log(res);
		    	$(loading).hide();
		    },
		    successCallback:function(res){
		    	console.log(res);
		    	$(loading).hide();
		    	alert('下载请求成功！');
		    },
		    failCallback: function (html, res) {
		    	console.log(res);
		    	$(loading).hide();
		    }
	  }); 
	}
</script>
</html>

后端页面:

利用eclipse的相关查找方式,可通过全局查找ctrl+H或者找到search->search也一样

找到相应的xml文件后class=""有选中的高亮部分,按住command鼠标点击进入该方法,找出写导出的内容:

加上:HttpServletResponse response = HttpUtil.getHttpServletResponse();

再选中HttpServletResponse按住command+1 => import*****

再在return "excel"之前加入response.setHeader("Set-Cookie", "fileDownload=true; path=/");

刷新页面重试导出excel功能

qq_42750608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.fileDownload.min.js插件用于excel导出实现加载中动画功能

前端页面:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="../../../js/common/common.jsp"%><!DOCTYPE html><html><he...
复制链接

扫一扫