자바스크립트 Ajax 파일 다운로드

클라이언트에서 여러 개의 파일을 다운로드 요청을 할 때 브라우저마다 동작을 다르게해서 문제가 될 수 있는 부분이 있다. 하나의 파일 다운로드 요청이 끝나기 전에 다음 요청을 전송할 경우, 크롬 브라우저에서는 이전의 요청을 취소해버릴 수도 있다. 이런 현상을 우회해서 다중의 파일 다운로드를 클라이언트에서 구현하려면 Ajax 요청으로 구현하면 된다.

 

 

서버 파일 전송코드 PHP 예제

header("Content-Disposition: attachment; filename= \"".$file_name."\"");
header("Content-type: application/octet-stream;");
header('Content-Length: '.$fsize);
header("Content-Transfer-Encoding: binary;");
header("Expires: 0;");

readfile($img);

 

 

클라이언트 파일 요청 Javascript 예제

var request = new XMLHttpRequest();
request.responseType = "blob";
request.onload = function() {
var link = document.createElement('a');
link.href = URL.createObjectURL(this.response);
link.download = "image.jpg";
link.click();
}
request.open("GET", '/image/url/');
request.send();

 

 

위의 예제와 같이 서버에서 파일 전송 요청을 처리해준다고 가정하자. header에서는 octet-stream 형식으로 던져주기 때문에 단순하게 자바스크립트에서 Ajax 요청을 받으면 아래와 같은 binary string을 받게 된다. 

 

Ajax 요청으로 이미지 파일을 요청했을 때의 Response 데이터. octet-stream 형식이기 때문에 변환을 해줘야한다.

이런 문제를 해결해주려면 위의 클라이언트 코드 예제처럼 a 태그를 만들어주고, URL.createObjectURL 함수를 통해서 파일 링크를 만들어주면 된다. 이렇게 해주면 a 태그를 통해서 로컬 경로에서 파일을 다운로드 받는 것과 같은 기능을 구현해 줄 수 있다. 실제로 코드를 실행해보면 사용자 입장에서 파일을 다운로드하는 것과 동일하다.