javascript로 csv 파일 다운로드 만들기


보통 csv 파일을 다운로드하려면 browser에서 서버로 요청을 해서 파일을 다운로드 하도록 만든다.


화면에 나오는 데이터에 관한 동일한 filter 조건들을 넘겨서 query 한 뒤 파일로 만들다.


화면에 있는 그대로 하는 더 쉬운 방법이 있다.




html




js


function exportDataToCSVFile(header, keys, body) { var csv = '' csv=header.join(','); csv+='\n'; $.each(body, function(index, rows){ if(rows){ var tmp = []; $.each(keys, function(index, key){ key && tmp.push(rows[key]) }) csv+=tmp.join(','); csv+='\n'; } })

var BOM = '%EF%BB%BF';// excel 에서 한글이 안깨지도록 해준다. // Data URI var csvData = 'data:application/csv;charset=utf-8,'+BOM+',' + encodeURIComponent(csv); $(this) .attr({ 'download': 'temp.csv', 'href': csvData, 'target': '_blank' }); } $('#excelDownload').on('click', function(event){ var header = []; header.push('col1'); header.push('col2'); header.push('col3'); header.push('col4'); var body = []; body.push({'key1':'a1', 'key2':'b1', 'key3':'c4', 'key4':'d1'}) body.push({'key1':'a2', 'key2':'b2', 'key3':'c3', 'key4':'d2'}) body.push({'key1':'a3', 'key2':'b3', 'key3':'c2', 'key4':'d3'}) body.push({'key1':'a4', 'key2':'b4', 'key3':'c1', 'key4':'d4'}) var keys = []; keys.push('key1'); keys.push('key2'); keys.push('key3'); keys.push('key4'); exportDataToCSVFile.apply(this, [ header, keys, body ]) })



주요 쟁점은 a element에 href를 data:application/csv 로 만들고, 해당 데이터를 넘기는 것이다.


jsfiddle link(http://jsfiddle.net/d26zC/40/) 에 돌아가도록 링크를 만들었다.


잘활용하면 코딩의 양을 줄일 수 있다.


단점: 너무 큰 파일은 제대로 동작을 안한다.


테스트 결과 약 1만 라인(640KB) 까지는 이상없이 동작함을 확인했다.

+ Recent posts