[ Javascript ] 첨부파일 다운로드 | Blob

이 기능을 구현하기 위해서는 Blob 데이터의 사용이 필수적이다.

 

Blob은 용량이 큰 데이터를 다루는 데 사용되며, 이미지나 동영상 등을 메모리에 효율적으로 저장하고 전송할 수 있게 해주는 역할을 한다. 그렇기 때문에 파일 다운로드를 구현할 때도 이 Blob 데이터를 사용한다.

 

---

 

*️⃣ 첨부파일 다운로드 API

/**
 * 게시판 첨부파일 다운로드
 * @param params
 * @example { fileId: 'abcd' }
 * @returns
 */
async function downloadNoticeFile(params: object) {
  const res: Blob = await api.get('/notice/download', {
    params: params,
    responseType: 'blob',
  });
  return res;
}

 

responseType을 blob으로 지정해주어 반환 데이터를 blob 타입으로 받아와야 한다. 

 

▪️ 응답 받은 response 형태

 

❓ API 반환값의 type이 "application/octet-stream”인 이유

application/octet-stream은 이진 파일을 위한 기본값이다.

즉 따로 지정한 타입이 없기때문에 기본값으로 지정해주는 것이라고 한다.

 

---

 

*️⃣ API 요청 값을 이용한 download 구현

const fileDownload = async (file: NoticeFile) => {
  const params = { fileId: file.fileId };
  const response = await downloadNoticeFile(params);
  const data = new Blob([response]);
  const url = URL.createObjectURL(data);
  const link = document.createElement('a');
  link.href = url;
  link.download = file.fileNm;
  link.click();
};

 

 

• new Blob([response]) 진행 시 data는 type을 가지지 않은 Blob 형태로 변환된다.
• 이 새로운 Blob data를 이용해 다운로드를 위한 임시 url을 생성한다.
  • URL.createObjectURL() - Web API | MDN
• 임의의 DOM element를 생성하여 파일 다운로드를 할 url을 바인딩해준다. (a 태그)
• 다운로드할 파일의 이름은 params로 받은 file의 fileNm을 바로 적용해주었다.
• click() 이벤트를 발생시켜 마치 사용자가 a 태그를 눌러 url 다운로드를 실행한 것처럼 동작하게 한다.

 

 

---

[ 참고 자료 ] 

https://developer.mozilla.org/ko/docs/Web/API/Blob

https://velog.io/@minh0518/Blob%EA%B0%9D%EC%B2%B4%EB%9E%80