728x90
반응형
본 글은 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를 클릭하고 삭제하는 로직을 가진다.
728x90
반응형
'Front Ent > React' 카테고리의 다른 글
[React] 리액트에서 클립보드 사용하기 (0) | 2024.10.13 |
---|---|
[React] State와 Select Tag Binding. (0) | 2024.10.13 |
[React] Title, Favicon 변경하는 법 (0) | 2024.09.20 |