React | 파일 다운로드

• 참고 https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743

---

Spring Boot로 만든 API에서 엑셀 파일을 다운로드 해보자..

axios

{responseType: 'blob'}설정을 해준다.
이러함.. apiClient는 axios.create()으로 만든 모듈?이다.

const res = await apiClient.get(url, {
      responseType: 'blob',
    });

return res;

download

useAsync를 사용해서 state값이 성공이면.. data 상태값이 변경되게 된다. 그래서 useEffect()로 처리했다.
혹시몰라 컴포넌트가 언마운트되면 해당 링크도 삭제하게 만들었다.

  useEffect(() => {
    if (fileData) {
      const url = window.URL.createObjectURL(new Blob([fileData.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'test.xlsx');
      link.setAttribute('id', 'tempLink');
      document.body.appendChild(link);
      link.click();
    }
    return () => {
      const link = document.querySelector('#tempLink');
      link && link.remove();
    };
  }, [fileData]);