[TIL] 서버로 부터 받은 Byte Data, React에서 다운 받기

본 글은 TIL(Today I Learned) 로 공부 내역에 대한 포스팅입니다.

 

상황

서버로부터 Binary Data를 받아야 하는 상황에서 React 프론트 엔드는 이에 대한 처리 방식에 대한 정리

 

아래는 예시 백엔드 소스 코드이다.

# Flask 서버로 예시를 들자면 아래와 같은 상황이다.
import io

@app.route('/GetDataFromServer', methods=['GET'])
def GetDataFromServer():
    return Response(io.BytesIO())

 

그에 대한 리액트 프론트 엔드 서버 소스 코드이다.

setLoading(true); // 로딩을 실행한다.

axios.get('/GetDataFromServer', {responseType: 'blob'})
.then((response) => new Blob([response.data]) // Blob 객체를 통해 받은 데이터 Blob 데이터로 변환
.then((blob) => {
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob); // Blob 데이터를 다운로드 받을 수 있는 URL 형식으로 변환
    link.setAttribute('download', `Filename`);
    document.body.appendChild(link);
    link.click();
    link.remove();

    URL.revokeObjectURL(link.href);
})
.catch((error) => {
    console.error(error);
})
.finally(() => {
    // 모든 로직이 종료 후 로딩 종료
    setLoading(false);
})

 

클라이언트에게 보이지 않는 <a> 태그를 생성해 Blob URL을 href 속성으로 설정. 그 후 해당 Anchor를 클릭하고 삭제하는 로직을 가진다.