[React] axios를 이용한 excel 파일(.sheet) 다운로드 기능 구현

axios를 이용해서 api통신을 한 뒤 응답받은 데이터의 확장자명이 .xlsx 였다... 엑셀파일을 다운로드하는 기능을 구현해야했다.

 

거의 하루가 꼬박걸려서 구글링하고 찾아보고 시도했었지만 파일을 다운로드까지 가능했지만 엑셀 파일 데이터가 깨져서 보이지 않거나 [Object][object] 였던가.. 이런식으로 보이게 되었다

 

어쨋든 기능 구현은 성공했으니 메모도 할겸 끄적끄적해봐야겠다.

 

axios 요청 후 받은 응답 헤더

axios 요청 후 받은 응답 헤더를 네트워크 창을 통해서 본 정보이다.

위 사진에서 보이는 것처럼 Content-Dispostion은 .xlsx이며 Content-Type은 .sheet이다. 

console.log로 받아온 데이터를 보면 아래처럼 이상한 글자가 나온다...

PK
jA‹S‘ÛÀ Y
ð[Content_Types].xml­”MnÂ0…÷=Eä-J]TUE¢´Ë©ôÓxB,Ûò˜¿Ûw(ª* ª`+™7ï{žÄO¶IÖH;›‹Q6 ÚÒ)m¹øœ¿¦"¡Vqs±C“ân<ßy¤„›-墎Ñ?IIe
Pæ<Z®T.4ù6,¤‡r ”÷Ãáƒ,hc[QŒ§XÁÊÄäeˏ÷AÉó^زr
Þ]Bäº\[õ‡’wvªµ§
„<Ih+ç
‡¾wžLÐ
“„ø
«äÖȍË/ç–Ùe“)]Ué•+W

- 코드 -

    axios({
      method: "GET",
      url: `API요청 주소`,
      responseType: "blob",
      // 구글링 해보니 responseType을 꼭 추가하라고 했다.
    }).then((res) => {
      const url = window.URL.createObjectURL(
        new Blob([res.data], 
        { type: res.headers["content-type"] })
      );
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute(
        "download",
        `생성하고 싶은 파일명.xlsx`
      );
      document.body.appendChild(link);
      link.click();
    });

window.URL.createObjectURL은 파일 객체나 로컬 파일 또는 데이터의 참조를 가리키는 새로운 객체 URL을 생성한다.(링크 참고)

 

 

코드만 보면 별거 없는거 처럼 보이는데 뭔가 처음해보는 기능을 만들려고하면 아직은 많이 힘든 것 같다.