jquery 엑셀다운로드(submit) 시 로딩 show/hide 구현하는 법.

* poi가 아닌 jsp의 헤더 설정으로 xls파일 다운로드 시, form submit 을 통해 다운로드 하는데,

 엑셀 용량이 크면 로딩바가 필요하다. 그러나 submit방식으로 구현하게 되면 로딩 이미지가 hide되지 않아..ㅠ

 

* 해결

 => jquery fileDownload.js 오픈 lib를 이용한다.

 

 소스다운로드 : https://github.com/johnculviner/jquery.fileDownload/blob/master/src/Scripts/jquery.fileDownload.js

 데모 : http://jqueryfiledownload.apphb.com/

 

---

 

$(".loading-image").show();

$.fileDownload($("#form").prop('action'),{

httpMethod:"POST",

data:$("#form").serialize(),

successCallback: function(url){

$(".loading-image").hide();

},

failCallback: function(responseHtml,url){

$(".loading-image").hide();

}

}

---

위와같이 적용하면 해결.

 

그러나, ie에서 조회되지 않는 현상이 발생하였다.

보아하니, 무조건 failCallback으로만 return되던데, 그 현상이 발생하면, ie에서는 파일다운조차도 되지 않는듯 했다. (타 브라우저는 다운가능)

 

* 2번째 해결.

헤더에,

response.reset(); <- 헤더 설정 전에 끼워넣음

response.setHeader("Set-Cookie","fileDownload=true; path=/");

요로케 넣으면 정상적으로 작동한다. (fileDownload.js 1.6.3 버전 기준.)