서버에서 보내오는 첨부파일을 프론트에서 다운로드하려면 어떻게 해야 할까?
😇 빠른 결론
서버에서 Base64로 데이터를 보내주고 프론트는 해당 데이터를 Blob객체로 만든 후 객체 URL을 생성하면 된다.
Blob이란?
Blob은 JavaSciprt에서 이미지, 사운드 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다.
Blob이란 특정 "MIME Type"의 "바이너리 데이터"를 저장하는 객체다.
Blob 생성 방법
new Blob(source배열, {type: "MIME Type", endings: "transparent"});- source 배열: ArrayBuffer, ArrayBufferView, Blob, File, DOMString을 요소로하는 배열을 입력 받는다.
- option 객체: MIME Type과 문자열 처리 방식을 설정한다.
- type: MIME Type을 객체 형태로 입력받는다.(ex. "image/png", "audio/*" 등. 디폴트 "")
- endings: \n을 포함하는 문자열 처리 방식(ex. "transparent" | "native". 디폴트 "transparent")
객체 URL이란?
<audio>, <video>, <img> 태그 등의 src 값으로 사용하기 위해 객체 URL을 생성 한다.
객체 URL 생성 & 폐기
// 생성
const objectURL = window.URL.createObjectURL(Blob)
// 폐기
window.URL.revokeObjectURL(objectURL);React 프로젝트 적용!
// react component
const onDownload = () => {
const blobUrl = b64ToBlob(byte); // byte: 서버에서 보내오는 데이터
attachmentsTag.href = blobUrl;
attachmentsTag.click();
};
// utils file
const b64ToBlob = (byteData: string) => {
const byteCharacters = atob(byteData);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray]);
const blobUrl = window.URL.createObjectURL(blob);
return blobUrl;
};- atob(): Base64 인코딩 된 문자열 데이터를 디코딩한다.
- charCodeAt(): 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환한다.
- Unit8Array(): 8비트 부호없는 정수의 배열을 생성한다.
혹시 내용에 오류가 있다면 피드백 부탁드립니다. 🙇🏻♀️
[참고]
