实现文件导出，写入等进度条实时显示

 

1、首先需要下载进度条插件，网址链接如右 http://www.jq22.com/jquery-info436

2、将解压后文件夹中的js,css文件拷贝到项目中对应的css,js文件中。

3、引入js和css

	<link rel="stylesheet" href="css/jquery.circliful.css"/>
    <script type="text/javascript" src="js/jquery.circliful.min.js"></script>

4、编写进度条的样式

#Mask {
     position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #333;
     z-index: 1002; left: 0px;
     opacity:0.5; -moz-opacity:0.5;
}
#Progress{
    position: absolute; top: 36%;left:43%;z-index: 2000;color:#6633CC;
}
#Progress .circle-info{
    color:#6633CC;
}

5、前台div编写

	<!-- Mask是遮罩，Progress是进度条 -->
      <div>
      <div id="Mask"></div>
      <div id="Progress" data-dimension="200" data-text="0%" data-info="导出进度" data-width="15" data-fontsize="30" data-percent="0" data-fgcolor="#22eeee" data-bgcolor="#6633CC"></div>
      </div>

6、编写进度条的显示和隐藏函数

//显示进度条
				    var isFirstExport=true;
				    function showProgress(){
				        $("#Mask").css("height",$(document).height());
				        $("#Mask").css("width",$(document).width());
				        $("#Mask").show();
				        if(isFirstExport){
				            $("#Progress").circliful();
				        }else{
				            $("#Progress .circle-text").text("0%");
				            $("#Progress .circle-info").text("导出进度");
				            $("#Progress").show();
				        }
				    }  
				    //隐藏进度条
				    function hideProgress(){
				        $("#Mask").hide();
				        $("#Progress").hide();
				    }          

7、在导出的地方写入当前进度，并储存在session中 

public void exportCSV(HttpServletRequest request,String rootPath, String title, String[] headers,
			List<LinkedHashMap<String, Object>> dataset, OutputStream out) {
		try {
			System.out.println(rootPath);
			CsvWriter csvWriter = new CsvWriter(rootPath,',', Charset.forName("UTF-8"));
			//写入表头信息
			csvWriter.writeRecord(headers);
		    //写入内容信息
			for(int k=0;k<dataset.size();k++){
				curcount++;
				LinkedHashMap<String, Object> infos=dataset.get(k);
				String agent_id=infos.get("agent_id").toString();
				String extension=infos.get("extension").toString();
				String starttime=infos.get("starttime").toString();
				String endtime=infos.get("endtime").toString();
				String info=infos.get("info").toString();	
				csvWriter.write(agent_id);
				csvWriter.write(extension);
				csvWriter.write(starttime);
				csvWriter.write(endtime);
				csvWriter.write(info);
				csvWriter.endRecord();
				
				//导出的进度条信息
				 double dPercent=(double)curcount/totalCount;   //将计算出来的数转换成double
		         int  percent=(int)(dPercent*100);               //再乘上100取整
		         request.getSession().setAttribute("curCount", curcount);
		         request.getSession().setAttribute("percent", percent);    //比如这里是50
		         request.getSession().setAttribute("percentText",percent+"%");//这里是50%	
			}

 

8、在Controller中编写一个方法，用于实时刷新进度条

/**
     * 进度条刷新，数据从session当中取
     */ 
	    @ResponseBody
	    @RequestMapping(value = "/flushProgress.html")
	    public String flushProgress3(HttpServletRequest request) throws Exception
	    {
	        HashMap<String,Object> map=null;
	        try {
	            HttpSession session = request.getSession();
	            map=new HashMap<String, Object>();
	            map.put("totalCount",request.getSession().getAttribute("totalCount"));  //总条数
	            map.put("curCount", request.getSession().getAttribute("curCount"));      //已导条数
	            map.put("percent", request.getSession().getAttribute("percent"));          //百分比数字
	            map.put("percentText", request.getSession().getAttribute("percentText"));
	            //百分比文本
	           /// System.out.println(map.toString());
	        } catch (Exception e) {
	            e.printStackTrace();
	        }
	        return JSON.toJSONString(map);
	    } 

9、前台调用进度条接口，并设定实时刷新

 var data = {
				'fromTime':starttime,
				'toTime':endtime,
						     }
							 //写入数据
		$.ajax( {
				  type : "GET",
				  url: "${pageContext.request.contextPath}/Datecount.html",
				  data:data,
				  dataType: "json",
				  contentType: "application/x-www-form-urlencoded; charset=utf-8", 
				   success : function(msg) {
				          if(msg>150000){
				          alert('数据量超过20万条，请缩短起始时间间隔 !');		
				                 	  }
                          else if(msg>0){
				        // $('#loadding').removeClass('hidden');
	                      var url="${pageContext.request.contextPath}/excelData.html?fromTime="+encodeURI(starttime)+"&toTime="+encodeURI(endtime);
							       window.location.href=url; 
						 /*** 进度条的显示  */  
						 showProgress();
					  window.setTimeout(function(){
					    var timer=window.setInterval(function(){
						 $.ajax({
							 type:'post',
							 dataType:'json', 
							 url:"${pageContext.request.contextPath}/flushProgress.html",		 
                             success: function(data) {								            							          
									$("#Progress .circle-text").text(data.percentText);
			if(data.index===undefined||data.totalCount===undefined){						                    
			  $("#Progress .circle-info").text("导出进度");
			  //hideProgress();
						 }
            else{ 
            $("#Progress .circle-info").text("导出进度:"+data.index+"/"+data.totalCount);						            
				  }
				if(data.percent=="100"){
				window.clearInterval(timer);
				  hideProgress();	  }
									},
			 error:function(data){ 
					hideProgress();
								   }
									 });
										 },800);
										   },800);
										 isFirstExport=false;   
				                 	  }
				                 	  else{
				                 	    alert("该时间段数据信息尚未同步");  
				                 	  } 
				                 },
								 error:function(){
								  hideProgress();
								 }
				             });
				   		}

到此进度条顺利完工