[JS] excel 다운로드 통신

Javascript

[JS] excel 다운로드 통신

Yujzu 2024. 12. 26. 10:44

# new Blob()

: Blob (Binary Large Object) 객체 생성

- 주로 대용량 파일이나 바이너리 데이터(이미지, 비디오 등)를 처리할 때 사용

- Blob 은 파일의 데이터를 메모리상에 들고 있는 객체

[ 특징 ]

Blob은 이진 데이터를 효율적으로 처리할 수 있도록 도와주며, 파일의 형태로 데이터를 다룰 수 있게 합니다.
파일을 다룰 때, 특히 웹 애플리케이션에서 파일 업로드나 다운로드 기능을 구현할 때 유용하게 사용됩니다.
Blob은 대체로 파일 시스템의 일부로 처리되는 것처럼, 로컬 파일을 읽거나 다운로드할 때 사용될 수 있습니다.

[ 사용법 ]

- 두 가지 인수 받기

1. Array-like Object (배열과 유사한 객체)

: Blob의 데이터를 나타내는 값입니다. 문자열, ArrayBuffer, 또 다른 Blob 등을 배열에 넣을 수 있습니다.

2. 옵션 객체 (optional)

: Blob의 MIME 타입을 설정하는 옵션입니다. (예: type: 'image/png')

# MIME (Multipurpose Internet Mail Extensions)

: 파일의 형식이나 내용의 종류를 나타내는 문자열

형식 : " 타입/서브타입 "

MIME 타입	의미
text/plain	일반 텍스트
application/json	JSON 형식의 데이터
application/pdf	PDF 문서
text/html	HTML 문서
image/png	PNG 이미지
application/octet-stream	바이너리 데이터 (일반적으로 "다운로드용" 파일에 사용)

엑셀 파일 다운로드 예시 코드 )

// .xlsx 파일 다운로드 예시 (Axios)
axios.post('/api/download', requestData, {
  responseType: 'blob', // get인 경우 알아서 전환되었는데 ,post의 경우 responseType 지정이 필요했다
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  },
})
  .then((response) => {
    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'file.xlsx'; // 다운로드할 파일 이름
    link.click();
    
    document.body.removeChild(link);
    URL.revokeObjectURL(href);
  })
  .catch((error) => {
    console.error('다운로드 실패:', error);
  });

# 코드 쪼개서 알아보기

 headers: {
    'Content-Type': 'application/json', // 내가 보내는 데이터 타입
    Accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // 내가 받고 싶은 응답 타입
  },

- Content-Type : 요청 본문의 데이터 형식 (보통 POST, PUT 일 때 중요)

- Accept : 응답으로 받고자 하는 형식 명시 ( 서버가 맞춰주지 않아도 오류는 아님)

const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

→ 받은 데이터를 어떻게 처리할지 MIME 타입을 설정

- 파일 저장 시 확장자/ 프로그램 연동에 영향을 미친다.

- 브라우저가 파일을 열거나 저장할 때 참조한다.

  const link = document.createElement('a'); // 1
    link.href = URL.createObjectURL(blob); // 2
    link.download = 'file.xlsx'; // 다운로드할 파일 이름 // 3
    link.click(); // 4

→ 브라우저에서 파일을 다운로드하게 만드는 코드

1. HTML 의 <a> 태그를 새로 만들어서 변수 link 에 저장, 다운로드용 링크가 될 예정

2. blob을 브라우저에서 임시로 접근할 수 있는 URL로 변환

href에 연결된 주소를 누르면 브라우저는 blob 데이터를 다운로드 가능한 파일처럼 인식한다.

3. 다운로드 될 파일의 이름을 지정

4. 만든 링크를 실제로 클릭한 것처럼 프로그래밍적으로 실행해서 다운로드를 유도한다.

document.body.removeChild(link);
URL.revokeObjectURL(href);

- clean up 'a' element

- remove ObjectUrl, 다운로드가 끝난 후에는 메모리를 해제 해준다.

파일 업로드 다운로드

https://patrick-f.tistory.com/35?category=1031492

File upload library

https://upload.io/upload-js