리액트 axios 액셀 다운로드 기능 구현.

 

오늘은 get요청으로 백에서 넘겨준 액셀파일을 프론트에서 다운받는 코드 작성과 이 과정에서 이해한 걸 기록해보고자 한다.

 

우선 내가 구현한 건 다운로드 버튼을 눌렀을 때, 백에 get요청을 보내고 응답으로 액셀파일을 받아 다운해주는 것이다.

 

먼저, API.jsx에 다음과 같이 작성해주었다

export async function getAuditLogFile() {
  try {
    const response = await api.get("/audit/excel/downloadAll", {
      responseType: "blob",
    });
    if (response.status === 200) {
      return response.data;
    }
    console.error("error statuscode", response.status);
    return null;
  } catch (error) {
    console.error("Error getting Audit log", error);
    throw error;
  }
}

 

responseType:"blob"을 써주어 blob형태로 데이터를 받아오도록 한다.

응답 상태코드가 200이면 데이터를 반환하고 아니면 에러를 출력하도록 작성했다.

 

 

이제 다운로드 버튼이 있는 컴포넌트에 다음 코드를 작성해준다.

 

const handleAuditDownload = async () => {
    try {
      const data = await getAuditLogFile();
      const url = window.URL.createObjectURL(
        new Blob([data], { type: "application/vnd.ms-excel" }),
      );
      saveAs(url, "auditLog.csv");
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error("Error downloading audit log file", error);
      setShowRequestFailureModal(true);
    }
  };

 

- 위에 작성해준 getAuditLogFile을 호출해 서버에 파일 데이터를 요청하고 await로 비동기 함수 호출이 완료될까지 기다린다.

- const url= window.URL.createObjectURL은 서버에서 받아온 파일 데이터를 'Blob' 객체로 변환하고 이를 URL로 생성한다. 이 URL은 파일을 다운로드하는데 사용되는데 'application/vnd.ms-excel'은 액셀 파일 형식임을 나타낸다.

 

- Blob 객체는 Binary Large Object의 약자로 바이너리 데이터를 나타내는 객체다. Blob은 여러 종류의 데이터를 하나의 객체로 묶어 다룰 수 있는데, 텍스트나 이미지 데이터, 동영상 데이터 등을 하나의 Blob으로 표현할 수 있다.

- new Blob([data], options) 형태로 data는 Blob에 포함될 데이터를 나타내는 배열, options는 type 속성을 통해 MIME타입을 지정할 수 있다.

 

- saveAs(url, "auditLog.csv") : saveAs 함수로 Blob데이터를 파일로 다운로드하고 , 이때 파일 이름은 두번째 인자로 전달받은 값이 설정된다.

- window.URL.revokeObjectURL(url) : Blob을 생선한 URL을 해제하여 불필요한 리소스를 해제한다.