ExcelFile 다운로드를 하는일이 생겼다.
그런데 문제가 있었다. 서버에서 대용량 데이터를 조회, 처리하여 엑셀파일 다운로드 하는 기능인데.. 이게.. 속도가 느리다보니 progressbar라도 보이게끔 해줘야 했었다. 그런데 요청을 $('form').submit()과 같은 방식으로 처리 하기때문에 응답을 받을 수가 없다.
즉, 일반적인 방법으로는 submit을 할 경우 Ajax의 succeess나 , complete와 같은 유사 기능을 구현 할수가 없었다.
문제는 이러한 submit을 이용한 동기방식으로는 일반적인 방법으로는 요청후 응답을 받을수가 없는 문제점이 있다.
가령 다운로드 이벤트를 시작할당시에 progressBar를 표출시키고 이벤트가 끝난 시점에서 표출된 progressBar를 숨김 처리 할수가 없었다.
위의 조건을 충족하는 가장 간단한 방법이 Ajax의 complete 기능 이기때문에 시도 해봤으나. 실패
기본적으로 파일 다운로드의 경우 Ajax를 사용하지 못한다고 한다. Ajax를 사용할 경우 파일 다운로드 응답을 브라우저에서 처리하지 않고 ajax내에서 처리하기때문에 브라우저에서의 파일 다운로드는 사용이 불가능하다. 때문에 submit 또는 a 태그등등 몇가지의 동기방식을 이용해야 한다.
그래서 찾아봤다. ajax는 안되므로 여러곳을 뒤져서 찾아낸 결론은 form의 target을 iframe으로 주고 submit을 한후. iframe의 Load나 iframe의 doc상태를 체크하는 방법과 iframe의 요청후의 생성된 쿠키를 이용하는 방법이 있었다.
그중에 jquery의 lib를 찾을 수 있었다. 바로 jquery.filedownload.js !!!!
구현 방식을 대략 form의 submit을 iframe으로 지정하고 iframe의 submit요청후 생성된 쿠키를 가지고 체크하는 방법(?)인것 같다.
이 라이브러리를 이용하여 다음과 같이 간단한 방법으로 처리 할 수 있었다.
JAVA에 다음과 같은 header를 지정해준다.
response.setHeader("Set-Cookie", "fileDownload=true; path=/");
그리고 요청 페이지에서 jquery.fileDownload.js에 정의되어있는 fileDownload 이벤트를 실행한다.
$.fileDownload($("#searchForm").prop('action'),{
httpMethod: "POST",
data:$("#searchForm").serialize(),
successCallback: function (url) {
$("#commonLoader").hide();
},
failCallback: function(responesHtml, url) {
$("#commonLoader").hide();
alert('관리자에게 문의 주세요.');
}
});자세한 http://johnculviner.com/tag/jquery-filedownload-js/ 에서 사용방법을 참고 하자.
위의 샘플은 form의 submit을 이용한 방법 이지만 a태그를 이용한방법등도 있으니 찾아보자