CSV 다운로드

2017-03-08

서버에서 CSV 형식의 데이터를 받아온다는 것을 가정으로 javascript에서 csv파일로 다운로드 할 수 있게 만드는 법을 작성한다. CSV 형식의 데이터는 ,로 컬럼 구분하고 \n으로 라인을 구분하는 데이터다.

URL에 데이터를 넣어서 다운로드

var encodeUri = encodeURI(data);
var fileName = "obstacle-" + new Date().getTime() + ".csv";
var link = $("<a></a>").attr("href", encodeUri).attr("download", fileName);

$("body").append(link);
link[0].click();
link.remove();

위와 같이 만들면 간단히 csv데이터(data)를 다운로드 받을 수 있다. 하지만 위의 경우는 URL에 직접 데이터를 넣고 다운로드받는 형식이라 데이터의 크기가 URL의 최대 사이즈(2000 character)를 넘어가는 경우 오류가 발생한다. 그래서 다음과 같은 방식을 사용 할 수 있다.

blob을 사용한 다운로드

var blob = new Blob([data], {type: 'text/csv'});
var fileName = "obstacle-" + new Date().getTime() + ".csv";
var url = URL.createObjectURL(blob);
var link = $("<a></a>").attr("href", url).attr("download", fileName);

$("body").append(link);
link[0].click();
link.remove();

blob의 경우 IE 10+ 기준 600Mib, chrome 기준 500Mib까지 데이터를 넣고 다운로드받을 수 있다. 하지만 위와 같이 작성할 경우 chrome에서는 동작하지만 IE에선 동작하지 않는다. IE에서 동작 시키기 위해 다음과 같이 작성한다.

var blob = new Blob([data], {type: 'text/csv'});
var fileName = "obstacle-" + new Date().getTime() + ".csv";

if (navigator.msSaveBlob) {
  navigator.msSaveBlob(blob, fileName);
} else {
  var url = URL.createObjectURL(blob);
  var link = $("<a></a>").attr("href", url).attr("download", fileName);

  $("body").append(link);
  link[0].click();
  link.remove();
}

IE에서 blob 다운로드 할 수 있는 내장 함수를 사용하여 다운로드 시키면 된다.