File download in Javascript

웹 브라우저에서 파일 다운로드를 자바스크립트로 간단히 구현 해보자.

Javascript 에서 이미지, 텍스트 문서, 비디오와 같은 멀티미디어 데이터를 다룰 때는 Blob(Binary Large Object)이필요하다. Blob은 데이터의 크기 및 MIME 타입 정보를 확인하고 데이터 전송을 위해 Blob 객체로 변환하데 사용한다. 자세한 내용은 아래 링크를 참조하자.

• Blob
• MIME

const filename = 'image.png'
const data = '...Multimedia data...'
const blob = new Blob([data], { type: 'image/png' })
const path = window.URL.createObjectURL(data)
const link = document.createElement('a')
link.href = path
link.download = fileName
link.click()
link.remove() // IE 미지원

멀티미디어 데이터를 Blob으로 객체를 생성하고 createObjectURL 함수를 통해서 다운로드 가능한 URL을 생성한다. 생성된 URL을 HTML a태그에 연결하게되면 다운로드 받을 수 있다. 위 코드에서 알수 있듯이 서버에서 직접 다운로드를 받는 것이 아니라 브라우저에 저장된 blob파일을 다운로드 받게 되는 것이다.

IE 대응

IE 에서는 msSaveBlob 함수를 통해서 다운로드를 구현이 필요하다.

if (window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveBlob(data, fileName);
}

정리해 보면 아래와 같이 사용 하면 되겠다.

const filename = 'image.png'
const data = '...Multimedia data...'
if (window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveBlob(data, fileName);
  return;
}
const blob = new Blob([data], { type: 'image/png' })
const path = window.URL.createObjectURL(data)
const link = document.createElement('a')
link.href = path
link.download = fileName
link.click()
link.remove()

Content-Disposition

이 속성은 다운로드 방식을 선택 할 수 있다.

inline : 기본값으로 현재 웹 브라우저 안에서 미리보기 처럼 나타난다.

attachment : 다운로드 받는 형태로 보통 Save as 이름으로 저장되고 filename 파라미터를 추가할 경우 새 이름으로 저장하게 된다.

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.png"

Axios

HTTP 모듈인 axios로 멀티미디어 파일을 가져올때 Blob 객체로 변환해서 받을수도 있다.

axios({
  ...
  responseType: 'blob',
  headers: {
    'Content-Type': 'image/png'
  }   
})

위와 같이 responseType을 blob 으로 주면 되고 Content-Type 도 다운로드 받는 파일 형식과 같은 값으로 지정해주자.