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

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