본문 바로가기
JavaScript

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

by SSaMKJ 2016. 9. 13.


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) 까지는 이상없이 동작함을 확인했다.

댓글