[Javascript / JSP] 원 버튼 다중 파일 다운로드(Multiple File all-download) 기능 구현(feat. iframe)

프로젝트를 진행하다가 '전체 파일 다운로드' 버튼을 클릭해 여러 개의 파일을 한 번에 다운로드해야하는 경우가 발생했다.

단순하게 개별 파일 다운로드를 반복문으로 처리하면 될 것 같다는 생각이 들었지만, 아래 에러 코드가 콘솔에 찍히며 난관에 부딪혔다.

 

Error : java.io.ioexception 현재 연결은 사용자의 호스트 시스템의 소프트웨어의 의해 중단되었습니다

 

에러가 발생하고, 난관에 부딪힌 이유는 곧 밝혀졌다.

HTTP가 한 번에 한 개의 파일만 전송 가능하기 때문이었다.

( 개별 파일 다운로드를 구현할 때, 서버에서 ModelAndView에 객체를 담아 다운로드를 구현하였는데 하나의 request에 다중으로 View를 구현할 수 없다 )

 

그렇기에 처음으로 해당 기능을 구현하였을 때, 반복문의 마지막 파일만 다운로드가 되었다.

 

어떻게 해야하나 고민하던 찰나 iframe으로 해당 문제를 해결한 경우를 볼 수 있었고, 해당 방식을 적용해보기로 하였다.

 

iframe으로 여러 개의 View를 처리할 수 있을 거라는 믿음을 가지고 , , ,

 

 

반응형

 

[ 해결 방법 ]

 

iframe과 반복문을 통해서 처리하기 때문에, Javascript 코드만으로 간단하게 처리할 수 있다.

 

<!-- Javascript -->
//버튼 클릭 시 전체 파일 다운로드
const downloadAll = (nums) => {
    <!-- ids = [1, 2, 3] -->
    const ids = nums.split(',');
    
    for(let i = 0; i < ids.length; i++){
    	var url = `download/fileId=${ids[i]}`;
        fnCreateIframe(i);			//인덱스 번호로 name 값 지정
        $(`iframe[name=${i}]`).attr('src', url);
        fnSleep(100);
    }
}

//파일 간 시간 지연
const fnSleep = (dTime) => {
    const start = new Date().getTime();
    while(start + dTime > new Date().getTime());
};

//iframe 생성
const fnCreateIframe = (name) => {
    const frame = $(`<iframe name=\'${name}\' style=\'display:none;\'></iframe>`);
    frame.appendTo('body');
}


<!-- JSP -->
<button type="button" onclick="downloadAll('1,2,3')">DOWNLOAD ALL</button>

 

위와 같이 구현할 시 DOWNLOAD ALL 버튼을 클릭하면 iframe을 안보이게 여러 개 생성하여 원 버튼 다중 파일 다운로드(일괄 다운로드)를 구현할 수 있다 !

 

※ 단, 서버는 ModelAndView로 개별 다운로드가 구현된 상태여야 한다. 서버 코드도 추후 정리해볼 생각이다.

================================== 추가 ================================

 

▼ 서버 코드 구현 글( 요청 url이 이 글과 다른 것에 유의 )

[Spring / Legacy] AbstractView를 활용해 파일 다운로드 기능 구현해보기

 

🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱‍🏍