자바스크립트: AJAX로 blob 타입의 리스폰스 가져오기(파일 다운로드)

https://stackoverflow.com/questions/16086162/handle-file-download-from-ajax-post

스프링을 통해 바이너리 파일을 다운로드하는 기능을 AJAX로 구현하려 했는데 서버에서는 용량이 1.5MB인 파일이 다운로드 될 때는 3MB로 부풀려져서 다운로드 되는 문제가 있었습니다. 파일이 깨진것이며 복구 불가능한 상태였습니다.

결론부터 말하면 XMLHttpRequest의 responseType 을 blob으로 설정해야 하며 JQuery AJAX 기능은 오류가 지속적으로 발생하므로 자바스크립트 기본 XMLHttpRequest를 사용하는 것을 추천합니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
    	
    	 var filename = "";
    	 var disposition = xhr.getResponseHeader('Content-Disposition');
         if (disposition && disposition.indexOf('attachment') !== -1) {
             var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
             var matches = filenameRegex.exec(disposition);
             if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
         }
    	
        //this.response is what you're looking for
        console.log(this.response, typeof this.response);
        var a = document.createElement("a");
        var url = URL.createObjectURL(this.response)
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    }
}
xhr.open('POST', '/fileDownloadUrl');
xhr.responseType = 'blob'; // !!필수!!
xhr.send(formData); // 파라미터 설정하는 부분이며 formData 설정 부분은 생략

백엔드 부분은 JSP, Spring: URL을 입력하면 파일이 바로 다운로드되게 하기 참조

class="img-link shimmer" >