웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트에서 AJAX 비동기 방식으로 Excel 파일 다운로드 받는 방법

Last Modified : 2020-09-16 / Created : 2019-07-02
30,163
View Count

자바스크립트를 사용하여 비동기 AJAX를 사용하여 엑셀(Excel) 다운로드 받는 방법을 알아봅니다. 먼저 아래의 상황에서 ajax 다운로드를 수행하게 됩니다.

- AJAX로 서버에 값을 전송
- 전송된 값에 따라 엑셀(blob) 타입으로 서버에서 엑셀 파일을 리턴
- 전달 받은 response를 다운로드 링크를 만들어서 클릭 이벤트를 실행
- 다운로드 완료

흠 ... 위 과정을 수행하기 위해서 처음에는 제이쿼리 $.ajax()를 사용하려 했는데 XMLHttpRequest 객체를 사용하는 편이 더 간단한 것 같아 이 방법을 사용했습니다. 여기서 가장 중요한 부분은 두 가지 입니다.


! 잠깐 ~ Excel 다운로드에서 중요한 부분은?

가장 핵심적인 부분은 다음의 두 개입니다.


- new Blob를 만들고 타입에 엑셀 포맷을 추가할 것
- 다운로드 링크 엘리먼트를 만들어 클릭할 것

위 부분만 염두해 두면 나머지는 다 비슷합니다. 그럼 코드를 보도록 하겠습니다.




# AJAX 사용하여 엑셀 다운로드 받기 예제보기

먼저 서버에 전달 할 값이 있는 경우 변수에 _jsonData 변수에 저장합니다. 항상 똑같은 파일만 다운 받는다면 서버에 전달 값이 없을 수도 있겠죠... 하지만 대부분 값에 따라 달라지는 엑셀 파일을 다운받길 원할 것입니다.
var _url = '/testApi/';
var _jsonData = {
  name: 'webisfree',
  url: 'webisfree.com'
};

다음으로 XMLHttpRequest을 사용하여 서버에 값을 전달하도록 합니다. 그리고 응답(response) 결과에 new Blob()를 적용해야겠죠.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  // 전송 후 수행 할 코드 아래 입력
  if (this.readyState == 4 && this.status == 200) { // 서버와 정상 통신 확인
    var _data = this.response;
    var _blob = new Blob([_data], {type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});

    // 다운로드 링크 만들기는 아래에서 확인
  }
};

xhr.open('POST', _url);
xhr.responseType = 'blob';
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(_jsonData);

서버 통신 부분은 위의 과정으로 모두 끝입니다. POST 방식으로 전송하였고 responseType은 파일을 전달 받으므로 'blob'를 선언하였습니다. 그리고 콜백 함수 내부에는 new Blob()를 사용하였죠. 그럼 마지막으로 응답 받은 부분을 다운로드 하기 위해 링크 생성 부분을 알아볼께요.



# 파일 다운받기 용도의 링크 생성과 실행하기

blob로 응답 후 다운로드 받기 위해서는 링크를 임으로 만들고 강제로 클릭 이벤트를 수행하는 방법이 많이 사용되니 참고하세요. (여기서 강제는 클릭이 일어난 것처럼 강제하다는 의미입니다)
var link = document.createElement('a');
link.href = window.URL.createObjectURL(_blob);
link.download = 'text.xlsx';  //  파일 이름을 설정
link.click();

여기까지 모든 과정이 끝났습니다. 임의로 a 태그를 만들고 받을 내용에 _blob를 추가한 뒤 파일 이름을 정한 후 click()하면 끝입니다. 서버에서 파일 이름을 응답 코드에 보내주지 않으면 클라이언트에서 임의로 설정해야하겠죠. 파일 이름에 날짜 등을 넣어주는 것도 좋습니다.

그럼 전체 코드를 보면서 마치도록 할께요.
var _url = '/testApi/';
var _jsonData = {
  name: 'webisfree',
  url: 'webisfree.com'
};

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var _data = this.response;
    var _blob = new Blob([_data], {type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});

    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(_blob);
    link.download = 'text.xlsx';
    link.click();
  };
};

xhr.open('POST', _url);
xhr.responseType = 'blob';
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(_jsonData);

여기까지 코드는 모두 끝으로 AJAX로 파일 다운로드 방법을 알아보았습니다.

Previous

자바스크립트 ajax를 사용하여 비동기 방식 파일 업로드 예제

Previous

자바스크립트 메모라이제이션(memorization) 예제보기