java - web - 쿠키를 이용해 다운로드 할 파일을 생성하는 동안 프로그레스바 보여주기

웹 개발을 하다 보면 언제나 마주치는 것들 중에 하나가 바로 파일 다운로드 입니다.

파일을 다운로드 받기 위한 방법은 여러가지가 있습니다.

iframe을 이용한 방법, 새창을 이용한 방법, 자기 자신의 페이지에 바로 다운 받는 방법 등등 이 있습니다.

이번에 설명하려고 하는 것은 파일을 다운로드를 받는 방법과 무관하게 

다운로드 받을 파일을 생성하는 동안 로딩 표시나 프로그레스 바를 보여줄 수 있는 방법입니다.

용량이 작은 파일은 상관없지만 용량이 큰 파일은 생성하는데 시간이 오래 걸리기 때문에, 파일 다운로드 받기를 시도하고 있다는 사실을 사용자가 인지하지 못할 수 있습니다. 그렇게 되면 파일이 다운로드되지 않는다고 느껴 다른 페이지로 이동하거나 파일다운로드를 재시도하게 됩니다.

사용자 입장에서나 시스템 입장에서 모두 불편해지는 상황이 됩니다.

이런 상황을 해소하고자 하는게 이번 글의 목적 입니다.

간단하게 다운로드 할 파일을 생성하는 동안 화면에 뭔까 띄우기를 시작해 보겠습니다.

다운로드 할 파일을 생성하는 흔한 경우가 바로 엑셀 파일입니다.

엑셀 파일을 다운로드 하는 자바스크립트 코드입니다. (jquery 쿠키 플러그인을 이용하고 있습니다. https://plugins.jquery.com/cookie/)

// 엑셀 다운로드 받기
function goExcelDownload() {
    $('#searchForm').submit(); // 다운로드 요청 !!
 
    fullSpinOn(); // spin 화면에 띄우기
 
 
    // 0.5 초마다 fileDownloadToken 라는 쿠키가 있는지 체크합니다.
    // 해당 쿠키가 있으면 spin을 끄고 fileDownloadToken 쿠키를 지운 후 Interval 을 종료 합니다.
    FILEDOWNLOAD_INTERVAL = setInterval(function() {
      if ($.cookie("fileDownloadToken") != null) { 
        $.cookie('fileDownloadToken', null, {
          expires : 0,
          path : location.pathname
        });
        clearInterval(FILEDOWNLOAD_INTERVAL);
        fullSpinOff();// 끄기
      }
    }, 500);
  }

세상 간단합니다.

이해가 안되면 무슨 코드인가 싶겠지만 간단한 트릭정도로 생각하시면 됩니다.

1. 엑셀 다운로드를 서버에 요청한다. 

2. 바로 화면에 뭔가(로딩,프로그레스,스핀 등등)를 띄운다.

3. 서버에서 쿠키를 응답할 때까지 쭈욱 기다린다.

4. 서버에서는 파일 생성이 완료되면 다운로드 파일을 포함한 응답을 준다.

5. 응답 헤더에 쿠키가 포함되어 있어 파일다운로드가 시작되면 화면에서는 뭔가를 끈다.

6. 파일 다운로드가 시작된다. !!

JAVA 기준의 서버 쪽 소스를 보면 아래 처럼 간단하게 응답헤더에 쿠키만 넣어주면 끝입니다.

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
 
... 중략
 
 
// 엑셀 다운로드 요청을 처리하는 곳에서
// 응답 헤더에 fileDownloadToken 쿠키를 넣어줌.
 
Cookie cookie = new Cookie("fileDownloadToken", "TRUE");
response.addCookie(cookie);

대용량 파일 생성 후 다운로드 하는 서비스에는 필수 입니다.

고고~