[javascript] SlickGrid의 CSV 내보내기

SlickGrid는 강력한 JavaScript 그리드 라이브러리로서, 사용자에게 데이터를 표시하고 편집하는 기능을 제공합니다. SlickGrid를 사용하여 표시된 데이터를 CSV 파일로 내보내는 방법에 대해 알아보겠습니다.

CSV 파일 생성하기

SlickGrid에서 CSV 파일을 생성하기 위해서는 slick.dataview.js 파일의 기능을 사용해야 합니다. 다음은 SlickGrid의 기존 데이터를 CSV 파일로 내보내는 예제 코드입니다.

function exportToCsv(grid) {
  var dataView = grid.getData();
  var columns = grid.getColumns();
  var exportedData = '';

  // 헤더 생성
  for (var i = 0; i < columns.length; i++) {
    if (i > 0) {
      exportedData += ',';
    }
    exportedData += '"' + columns[i].name + '"';
  }
  exportedData += '\n';

  // 데이터 생성
  for (var j = 0; j < dataView.getLength(); j++) {
    var rowData = dataView.getItem(j);
    for (var k = 0; k < columns.length; k++) {
      if (k > 0) {
        exportedData += ',';
      }
      exportedData += '"' + rowData[columns[k].field] + '"';
    }
    exportedData += '\n';
  }

  // CSV 파일 다운로드
  var blob = new Blob([exportedData], { type: 'text/csv;charset=utf-8;' });
  var url = URL.createObjectURL(blob);
  var link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', 'data.csv');
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

$(function() {
  var grid = new Slick.Grid('#grid', data, columns, options);
  $('#exportButton').click(function() {
    exportToCsv(grid);
  });
});

위의 코드에서 중요한 부분은 exportToCsv 함수입니다. 이 함수는 SlickGrid의 getData 메서드를 사용하여 그리드의 데이터와 열 정보를 가져온 다음, CSV 형식으로 변환하여 파일로 다운로드합니다.

예제 실행하기

위의 예제 코드를 실행하기 위해서는 SlickGrid과 jQuery 라이브러리가 필요합니다. 예제 코드에는 데이터와 열 정보가 필요하므로, 해당 부분을 사용자의 데이터에 맞게 수정해야 합니다. 또한, CSV 파일을 생성하는 버튼을 포함하는 HTML 파일이 필요합니다.

다음은 예제 코드를 실행하기 위한 HTML 파일의 내용입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SlickGrid CSV Export Example</title>
  <link rel="stylesheet" href="slick.grid.css">
</head>
<body>
  <div id="grid" style="width:100%;height:500px;"></div>
  <button id="exportButton">Export to CSV</button>
  <script src="jquery.min.js"></script>
  <script src="slick.core.js"></script>
  <script src="slick.grid.js"></script>
  <script src="slick.dataview.js"></script>
  <script src="app.js"></script>
</body>
</html>

위의 HTML 파일에서는 SlickGrid과 관련된 CSS 파일과 JavaScript 파일을 포함시킨 다음, app.js 파일에 예제 코드를 추가하였습니다. 사용자는 필요한 파일들을 다운로드한 후, 해당 HTML 파일을 웹 브라우저에서 실행하여 SlickGrid를 표시하고 CSV 파일을 생성할 수 있습니다.

참고 자료