[AngularJS] $http 이용하여 비동기 POST 요청 csv 파일 부터 엑셀(xlsx) 파일 다운로드 구현!

개요

비동기 POST 요청에 의한 파일 다운로드 처리 구현 방식
이때 파일 형식 csv과 엑셀 처리 방식을 조사

구현

기본 CSV 형, xlsx 형

기본 CSV 처리

$http({
    url: '/path/to/your/API',
    method: 'POST',
    params: {},
    headers: {
        'Content-type': 'application/pdf',
    },
    responseType: 'arraybuffer'
}).success(function (data, status, headers, config) {
    // TODO when WS success
    var file = new Blob([data], {
        type: 'application/csv'
    });
    //trick to download store a file having its URL
    var fileURL = URL.createObjectURL(file);
    var a = document.createElement('a');
    a.href = fileURL;
    a.target = '_blank';
    a.download = 'yourfilename.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}).error(function (data, status, headers, config) {
    //TODO when WS error
});

출처: https://code.i-harness.com/ko-kr/q/d8e789

• 비동기 요청으로 파일 다운로드 할 경우가 있는데 위코드를 이용하여
  보이지 않는 a 태그와 응답값의 링크를 만들어서 클릭을 한 것으로 처리 하는 방식으로
  되어 있는 것을 확인(이를 tricky 하다고 함 ㅋㅋ)

• 잘 보면 Blob 이라는 객체를 이용해서 실제 API 서버 응답값을 이용하여 처리 함.
  더불어 다운로드 이름 정하는 부분으로 a 속성 값을 컨트롤 함.

xlsx 처리

위 csv 처리로 xlsx 처리가 되지 않음. 엑셀 파일 처리 방식

$http({
    url: '/path/to/your/API',
    method: 'POST',
    params: {},
    headers: {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    },
    responseType: 'arraybuffer'
}).success(function (res, status, headers, config) {
    var file = new Blob([res.data], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    var fileURL = URL.createObjectURL(file);
    var a = document.createElement('a');
    a.href = fileURL;
    a.target = '_blank';
    // 파일 이름 정의 
    a.download = 'DATA-' + moment(startDate).format('YYMMDDThhmmss') + '-' + moment(endDate).format('YYMMDDThhmmss') + '.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}).error(function (data, status, headers, config) {
    //TODO when WS error
});

참고: https://stackoverflow.com/questions/34993292/how-to-save-xlsx-data-to-file-as-a-blob

• 참고 글에서 atob 함수와 자체 구현한 s2ab 함수를 사용해서 다운로드 처리하는 부분이 있었으나 시도했을때 파일 형식이 맞지 않아 파일이 열리지 않았음

• 내용 중에 type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’ 타입 처리와 결과 데이터 자체를 별다른 처리 없이 수행하는 것으로 처리 하여 위 코드 구현

결론

• 응답 파일을 Blob 으로 변환

• URL.createObjectURL 이용하여 가상의 객체 링크를 생성

• document.createElement 이용하여 가상의 a 태그 생성

• a 속성 href 생성한 링크, target 으로 ‘blank’ 속성 지정

• a 속성으로 download 로 파일 명 지정!!

• a 태그 click 메소드 호출로 다운로드 하도록 트리거!

• 생성한 a 태그 결과 document.body.removeChild 이용 해당 생성 a 태그 내용 삭제

• 이 방법 외에 더 효율이며 정석적인 처리 방식은 있는가?