[JavaScript] AWS S3 첨부파일 다운로드 구현 (작성 중)

 

 
1) 다운로드는 되는데 제대로 된 파일로 만들어지지않거나
2) 파일 다운로드를 해결했더니 지정한 파일명대로 받지 못하는 현상때문에 정리해본다.

 

 

 

 

---

 

 

Blob

 

◽️ blob이란?
Binary Large Object의 약자로, 멀티미디어 객체들을 가리킨다.
 
 
◽️ Body 믹스인의 프로퍼티
- bodyUsed: body를 사용했냐 여부
- blob(): Blob 인스턴스를 반환
- json(): JSON.parse()의 결과를 반환
- text(): Text를 UTF-8로 인코딩하여 반환
 
 
 

 

---

 

프론트단에서 구현하기

 

아래와 같이 구현한다.

const excelDownload = () => {
    // 1. fetch 실행이 끝나면 FETCH API는 내부적으로 Body Object를 상속받아 Response 인스턴스를 생성
    const res = await fetch('S3 리소스 URL')
    // 2. blob() 메소드는 Body Object의 메서드로 상속이 되어있으므로 res.blob() 가능, blob 인스턴스 반환
    const blob = await res.blob()
    // 3. 여기서 이 작업을 해주지않으면 link.download에 있는 파일명으로 다운로드하지 못한다.
    // createObjectURL()는 URL을 DOMString으로 반환한다. (URL 해제는 revokeObjectURL())
    const downloadUrl = window.URL.createObjectURL(blob) // 이 과정이 필요하다.

    const link = document.createElement('a')
    link.href = downloadUrl
    link.download = '다운로드명.xlsx'
    link.click()
}

 

앞에 blob:이 붙어 구현된다.

<a href="blob:S3 리소스 URL" download="다운로드명.xlsx"></a>

 

 

 

---

 

URL로 바로 다운로드하기

S3에서 CloudFront를 사용하는 경우 dresponse-content-disposition, response-content-type Parameter를 허용해준다.
 

 

테스트 중...

const makeEncodedUrl = (fileName) => {
  const encodeFileName = encodeURI(fileName)
  const contentPdfType = 'application/pdf'
  const s3ResourceUrl = 's3URL'

  return (
    `${s3URL}` +
    `?response-content-disposition=attachment%3B filename*%3DUTF-8''${encodeFileName}&response-content-type=${contentPdfType}`
  )
}

const fileNm = '한글파일명.pdf'
console.log('[encodeURI(fileNm)] result >>> ', makeEncodedUrl(fileNm))

 

 

 

 

 
 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.