实现⽂件导出，写⼊等进度条实时显⽰
1、⾸先需要下载进度条插件，⽹址链接如右
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;
jquery下载文件请求}
#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" d      </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();
courserepeat翻译
}
}
//隐藏进度条
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> (k);
spring全部注解
String agent_("agent_id").toString();
String ("extension").toString();
String ("starttime").toString();
String ("endtime").toString();
String ("info").toString();
csvWriter.write(agent_id);
csvWriter.write(extension);
csvWriter.write(starttime);
csvWriter.write(endtime);
弥补openssl漏洞损失的是csvWriter.write(info);
//导出的进度条信息
double dPercent=(double)curcount/totalCount;  //将计算出来的数转换成double
int  percent=(int)(dPercent*100);              //再乘上100取整
}
8、在Controller中编写⼀个⽅法，⽤于实时刷新进度条
/**
* 进度条刷新，数据从session当中取
*/
@ResponseBody
@RequestMapping(value = "/flushProgress.html")
public String flushProgress3(HttpServletRequest request) throws Exception
{
HashMap<String,Object> map=null;
try {
HttpSession session = Session();
map=new HashMap<String, Object>();
map.put("totalCount",Session().getAttribute("totalCount"));  //总条数
map.put("curCount", Session().getAttribute("curCount"));      //已导条数
map.put("percent", Session().getAttribute("percent"));          //百分⽐数字
map.put("percentText", Session().getAttribute("percentText"));
composition的动词形式和名词形式/
/百分⽐⽂本
/// System.out.String());
} catch (Exception e) {
e.printStackTrace();
}
JSONString(map);
}
9、前台调⽤进度条接⼝，并设定实时刷新
var data = {
'fromTime':starttime,
'toTime':endtime,
}
//写⼊数据
$.ajax( {
type : "GET",
url: "${tPath}/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="${tPath}/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:"${tPath}/flushProgress.html",
success: function(data) {
$("#Progress .circle-text").text(data.percentText);
if(data.index===undefined||alCount===undefined){
$("#Progress .circle-info").text("导出进度");
//hideProgress();
}
else{
$("#Progress .circle-info").text("导出进度:"+data.index+"/"+alCount);
}
fermat是什么意思
if(data.percent=="100"){
window.clearInterval(timer);
hideProgress();  }
},
error:function(data){
hideProgress();
}
});
},800);
},800);
isFirstExport=false;
}
else{
alert("该时间段数据信息尚未同步");
}
},
error:function(){
hideProgress();
}
});
}
到此进度条顺利完⼯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。