Blob과 File Download

Blob?

JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 데이터를 표현하기 때문에 필연적으로 자바스크립트 네이티브 포맷이 아닙니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용합니다.

File 객체도 name과 lastModifiedDate 속성이 존재하는 Blob 객체입니다.

Window Navigator

window.navigator 객체는 방문자의 브라우저에 대한 정보를 포함합니다.

window.navigator 객체는 window 접두사 없이 작성할 수 있습니다.

따라서 앞으로 window가 들어간 부분은 생략해서 설명하겠습니다.

msSaveOrOpenBlob()

이 함수는 IE 브라우저를 사용할 경우 a태그의 download property를 사용할 수 없어서 이용해주는 함수이다.

encodeURIComponent()

encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)

decodeURIComponent()

decodeURIComponent() 함수는 encodeURIComponent 나 비슷한 방법으로 생성된 Uniform Resource Identifier(URI) 컴포넌트를 해독합니다.

// example csv
blob = new Blob([decodeURIComponent(csv)], {
    type: 'text/csv;charset=utf8',
})

URL

URL 인터페이스는 URL을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다. URL 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.

브라우저가 아직 URL() 생성자를 지원하지 않을 땐 Window 인터페이스의 Window.URL 속성으로 URL 객체에 접근할 수 있습니다. 개발에 사용하기 전, 프로젝트의 지원 대상 브라우저를 확인하고, 이런 절차를 추가해야 하는지 결정하세요.

URL.createObjectURL()

파라미터로 주어진 객체를 나타내는 URL을 포함한 DOMString을 생성하는 메소드이며, 생성된 URL은 특정 파일

혹은 Blob 객체를 가리킨다. a태그에 href 속성으로 URL을 지정하면 get방식이기 때문에 길이에 제한을 받지만

이 메소드를 사용하여 생성된 URL의 경우는 길이의 제약이 없는 것으로 보인다.

MDN

URL.revokeObjectURL()

URL.createObjectURL() 을 통해 생성한 기존 URL을 해제(폐기) 한다.

이 메소드를 통해 해제하지 않으면 기존 URL을 유효하다고 판단하고 자바스크립트 엔진에서 가비지콜렉터가

동작하지 않는다. 따라서 메모리 누수를 방지하기 위해 생성된 URL을 DOM과 바인딩한 후에는 해제하면 로직이

완료된다.

다운로드 함수

blob을 정의하고 createObjectURL로 다운로드 링크를 생성한 후 a태그를 생성하여 setAttribute로 a태그에 필요한 값들을 설정한 후 click()으로 실행시키고 remove()로 a태그를 제거하고, window.URL.revokeObjectURL(csvUrl) 로 create한 URL을 폐기해준다.

const downloadFile = link => {
    const filename = 'transactions.csv';
    const a = document.createElement('a');
    a.setAttribute('target', '_blank');
    a.setAttribute('style', 'display:none');
    a.setAttribute('href', link);
    a.setAttribute('download', filename);
    a.click();
    a.remove();
  };

const blob = new Blob([csv], { type: 'text/csv;charset=utf8' });
const csvUrl = URL.createObjectURL(blob);

downloadFile(csvUrl);