[jQuery] 동기방식의 파일다운

ASP로 제작된 사이트를 유지보수중입니다.

버튼 클릭시 데이타를 엑셀파일로 다운로드하는 기능을 추가했습니다.

​

일반적으론,,

조회된 데이타의 헤더에 "application/vnd.ms-excel" 를 붙이면 html body가 엑셀형식으로 다운이 됩니다.

여기까진 됐으나, 문제는 데이타를 조회하여 엑셀다운이 준비된 그 순간을 캐치를 못했다는 거죠.

​

때문에 사용자는 버튼 클릭시 아무런 액션이 없다가 내부적으로 엑셀다운이 준비가 되면 브라우저 하단에

다운로드 창이 나타나게 됩니다.

만약 서버와 통신이 지연된다면 사용자는 진행상황을 알 수 없어 계속 버튼을 클릭하는 경우도 생깁니다.

​

그럼 이런 방식은 어떨까요?

콜백함수를 이용하여 버튼 클릭시 비활성화하고, 엑셀다운준비가 완료되면 다시 활성화 하는 방법입니다.

자바스크립트로 단순하게 콜백함수를 구현할 순 있지만,

location.href로 asp파일을 호출하는 형태라면 데이타 조회가 끝나는 시점을 캐치하지 못하여

jquery.filedownloads.js 라는 구문을 이용하여 구현하였습니다.

https://github.com/johnculviner/jquery.fileDownload/blob/master/src/Scripts/jquery.fileDownload.js

​

아래 구문을 참고하세요

더 좋은 방법이 있다면 댓글 부탁드립니다^^

​

//asp파일 호출

$.fileDownload("exceldown.asp", {

prepareCallback: function (url) {

$("#btn_exceldown").prop('disabled', true);

alert("prepare");

},

successCallback: function (url) {

$("#btn_exceldown").prop('disabled', false);

alert("success!");

},

failCallback: function (html, url) {

$("#btn_exceldown").prop('disabled', false);

alert("Failed-" + html);

}

});

​