Javascript - Cookie를 이용해서 File download 시 Loading bar 구현

 파일을 다운로드 할 때 로딩 바가 보이지 않으면 사용자도 이게 작동하는지 안 하는지 알 수 없기 때문에 여러 번 버튼을 누르게 되고 이 때문에 서버에 악 영향을 줄 수 있습니다. 제가 지금 유지 보수하고 있는 곳이 그렇게 되어 있어서 이번 기회에 파일 다운로드 시 로딩 바가 나올 수 있도록 구현하고자 마음 먹었습니다. ajax를 이용하거나 iframe을 이용하는 등의 방법이 있지만 ajax로 통신할 경우 200 Error가 나고 iframe으로 하려 해도 onload 함수를 이용해서 구현해야 하는데 화면이 reset되는 것이 아니어서 둘 다 되지 않았습니다. 그래서 좀 더 찾아보니 Cookie를 이용해서 구현한 로딩 바가 있었습니다.

 - JAVA 단

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
 
/**
 * 중략..
 * 화면으로 돌아가기 전에 쿠키를 생성
 * 파일이 만들어지고 나서 실행해야 속도 맞추기가 더 쉬움 
 **/
 
 
Cookie cookie = new Cookie("fileDownloadToken", "TRUE");
response.addCookie(cookie);

- Javascript

<div id="loadingBar" style="display:none;">
    <img src="/images/loadingBar.gif"/>
</div>
 
<script type="text/javascript">
 
function getCookie(name) {
  var parts = document.cookie.split(name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}
 
function expireCookie(name) {
    document.cookie = encodeURIComponent(name) + "=deleted; expires=" + new Date( 0 ).toUTCString();
}
 
var downloadTimer;
 
//파일 다운로드를 submit할 때 아래 함수 실행
function blockUI() {
    $("#loadingBar").show();
    downloadTimer = setInterval(function() {
        var token = getCookie("fileDownloadToken");
        if(token == "TRUE") {
            unBlockUI();
        }
    }, 1000 );
}
 
function unBlockUI() {
    $("#loadingBar").hide();
    clearInterval(downloadTimer);
}
 
</script>
 

 JAVA단에서 Cookie를 생성한 후에 화면으로 던져주고 로딩 바가 나오게 한 후 주기적으로 Cookie를 검사해서 JAVA단에서 보낸 값과 동일한 값이 나오면 다시 로딩 바를 숨기고 Interval을 그만두게 하는 로직입니다. 좀 더 응용하면 파일이 만들어질 때나 파일을 화면으로 던질 때 Cookie를 생성해서 공통으로 사용하게 하거나 Cookie가 아니라 Session에 값을 넣고 사용할 수도 있을 것 같습니다. 아래 링크 두 개를 혼합하여 만들었습니다.


1. https://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download
2. http://goni9071.tistory.com/entry/%EC%9B%B9-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C