[React] Binary File 엑셀로 다운받기

API를 통해 받은 데이터가 아래와 같다면 이진법의 경우일 겁니다!

 

PK?N���]
'[Content_Types].xml͔]O�0���Ko�V@c�ap�ǥ��?��g��k��¿����A>�ܬY�{��...

 

보통 엑셀 값을 받았을 때 이런 값을 확인 할 수 있는데요, 이때 이 값을 바로 엑셀로 다운로드 되는 방식을 확인해볼게요! 

 

결과값은 아래와 같아요,

 

[Result]

		const blob = await response.blob();
		const url = window.URL.createObjectURL(new Blob([blob]));
		const link = document.createElement('a');
		link.href = url;
		link.setAttribute('download', '파일명.xlsx');
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);

 

 

 

[Summary]

 

Blob 이란 Binary Large Object 로, 말 그대로 대용량의 이진법 데이터를 다루는 객체! 입니다.

 

Sheetjs, xlsx 등으로 프런트에서 엑셀을 직접 만드는 경우도 있지만,

벡엔드에서 엑셀 데이터 자체를 내려줄때는 위와 같은 방법을 통해 바로 다운로드 가능해요.

 

		const blob = await response.blob();
        	const url = window.URL.createObjectURL(new Blob([blob]));

첫 번째 라인은 api 를 통해 받은 response 값에서 바이너리 데이터를 추출하는 역할이에요.

그리고 나서 그 바이너리 데이터를 가진  URL 을 만들어요. 그럼으로써 브라우저에서 해당 값을 읽을 수 있게 되죠.

 

 

		const link = document.createElement('a');
		link.href = url;
		link.setAttribute('download', '파일명.xlsx');

그리고 나서는 document에 해당 url을 연결할 수 있는 태그를 생성하고

파일명을 설정해줄 수 있어요.

 

		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);

그 후엔 임의로 body에 만들어둔 태그를 추가하고

click 이벤트를 발동해서 해당 엑셀 다운로드 액션을 실행해요

다 끝나고 나서는 임의로 추가해 두었던 태그를 제거하는 것으로 순서를 끝냅니다.

 

 

Blob 으로 이미지, 영상 등의 데이터도 다룰 수 있어요. 기회가 되면 그 친구도,.,