React.js - 엑셀 다운로드(Blob Type 다운로드)

 

API를 호출해서 Blob 타입의 Response 값을 받을 때 다운로드 기능을 구현하는 과정을 설명하려고 한다.

예를들어 "엑셀" 다운로드를 할 때 서버에서 만들어진 Excel을 클라이언트단에서 즉시 다운로드 기능을 구현하려면 아래와 같이 작업하면 된다.

 

// API를 호출하는 코드
const getExcel = useCallback(async () => {
  try {
    const blob: Blob = await api.getExcel(); // 타입 명시
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "member.xlsx");
    document.body.appendChild(link);
    link.click();
    link.remove();

    window.URL.revokeObjectURL(url);
  } catch (e) {
    console.log(e);
  }
}, []);

// API 코드
const getExcel: () => Promise<AxiosResponse<Blob>> = async () => {
const res = await axios.get(`api주소`, {
    responseType: "blob",
  });
  return res.data;
};

위 코드는 타입스크립트 환경에서 작업을 했습니다.

 

먼저 API를 작성하는 코드에서는 Axios 라이브러리를 사용했으며 Response 타입을 "blob"로 설정하였습니다.

responseType이 blob가 아니면 호출한 서버값이 제대로 인식하지 못해 유니코드로 계속 리턴을 하는 일이 발생하기 때문입니다.

 

그리고 실제 API를 호출하는 코드에서는 호출한 API의 Response값(blob)를 받고 blob로 url을 만든다음 동적으로 "a"태그를 만들어 attribute에 url을 넣어주고 download Attribute에 다운로드할 엑셀파일의 이름을 설정해 줍니다.

 

마지막으로 body에 appendChild를 통해 동적으로 a태그 Element를 삽입하고 클릭을 시킨다음에 그 후에 필요없는 a 태그를 지워주고 url까지 revoke 시켜줍니다.

 

이렇게 하면 서버에서 받아온 blob Response 값을 직접 받아 엑셀 다운로드 기능을 구현할 수 있습니다.