[Javascript] Blob객체로 CSV 파일 다운로드

클라이언트에서 다운로드 기능을 구현할 때

서버단에서 HttpServletResponse 객체의 header, contentType 등을 셋팅하여 

response객체의 OutputStream으로 내용을 전송했다.

 

이런 경우는 서버 컴퓨터의 저장된 파일을 다운로드할 때 많이 사용하는 방식이다. 

 

다운로드할 수 있는 경우는 파일, 프론트 데이터라고 생각하며 

프론트에 표시된 텍스트나 자바스크립트 객체의 데이터를 파일 형식으로 

다운로드할 때는 서버를 이용하지 않고 JS + HTML로만 구현이 가능하다.

 

const NAME = "TEST.csv"; 
const CONTENT = ['이름','직업'].join(',')
	+ "\n" 				
    + ['DEVSONG', 'DEVELOPER'].join(',');  

(function(){
	const BLOB = new Blob(
		['\ufeff' + CONTENT]
	);

    if(navigator.appVersion.toString().indexOf('.NET') > 0){
    	window.navigator.msSaveBlob(BLOB, FILE_NAME);
    }else{
    	const ENCODED_URL = URL.createObjectURL(BLOB);
        const LINK = document.createElement('a');
        LINK.setAttribute('href', ENCODED_URL);
        LINK.setAttribute('download', NAME);
        LINK.click();
	}
})();

 

예시 코드에서 보는 것과 같이 a 태그와 Blob객체를 이용하여 구현한다. 

 

1. Blob 객체란?

파일과 흡사한 불변 객체로 raw data이며, 데이터를 표현하기 때문에 

필연적으로 자바스크립트 네이티브 포맷이 아니다.

File 인터페이스는 기본적으로 Blob을 통해 이뤄지며, blob의 함수들을 

상속받고 확장하여 사용자 시스템의 파일을 지원해준다.

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

 

new Blob()의 파라미터로 내용과 타입을 입력할 수 있는데

내용은 배열로 입력해야 하며 '\ufeff'를 CONTENT에 더해준 이유는

한글이 csv파일에서 깨지지 않도록 BOM을 지정하는 것이다. 

 

2. navigator.appVersion

사용중인 브라우저의 버전을 알 수 있는 있고, IE 브라우저를 구분하기 위해 indexOf('.NET) > 0 조건을 주었다.

만일 IE를 사용중이라면 window.navigator.msSaveBlob()으로 Blob객체를 파일 다운로드할 수 있다.

(IE에서는 a태그의 download property를 사용할 수 없어서 위와 같이 프로그래밍 해야 한다.)

 

3. URL.createObjectURL()

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

생성된 URL을 특정 파일 혹은 Blob 객체를 가리킨다. 

a태그에 href 속성으로 URL을 지정하면 get방식이기 때문에 길이에 제한을 받지만

URL.createObjectURL()을 이용하여 생성된 URL의 경우는 길이의 제약이 없는 것으로 보인다.

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL