-
[Javascript] 테이블을 CSV 파일로 다운로드프로그래밍/JavaScript 2019. 1. 28. 17:26
▶Javascript 테이블을 CSV 파일로 다운로드
▶설명
테이블에 있는 데이터를 CSV 파일로 다운로드하고 싶은 경우 사용하는 코드입니다.
출처는 아래의 주소입니다.
출처에는 jQuery를 사용한 방법으로 작성됐기 때문에,
제가 기존의 코드에서 변경한 점을 작성하자면 아래와 같습니다.
- jQuery가 아닌 Javascript로 동작하도록 수정
- 파일이 UTF-8 BOM이 되도록 처리하였습니다. (엑셀로 볼 때, 한글 깨짐 현상 방지)
▶예제
export-csv 폴더
- export.js
- index.html
export.js
function exportTableToCsv(tableId, filename) { if (filename == null || typeof filename == undefined) filename = tableId; filename += ".csv"; var BOM = "\uFEFF"; var table = document.getElementById(tableId); var csvString = BOM; for (var rowCnt = 0; rowCnt < table.rows.length; rowCnt++) { var rowData = table.rows[rowCnt].cells; for (var colCnt = 0; colCnt < rowData.length; colCnt++) { var columnData = rowData[colCnt].innerHTML; if (columnData == null || columnData.length == 0) { columnData = "".replace(/"/g, '""'); } else { columnData = columnData.toString().replace(/"/g, '""'); // escape double quotes } csvString = csvString + '"' + columnData + '",'; } csvString = csvString.substring(0, csvString.length - 1); csvString = csvString + "\r\n"; } csvString = csvString.substring(0, csvString.length - 1); // IE 10, 11, Edge Run if (window.navigator && window.navigator.msSaveOrOpenBlob) { var blob = new Blob([decodeURIComponent(csvString)], { type: 'text/csv;charset=utf8' }); window.navigator.msSaveOrOpenBlob(blob, filename); } else if (window.Blob && window.URL) { // HTML5 Blob var blob = new Blob([csvString], { type: 'text/csv;charset=utf8' }); var csvUrl = URL.createObjectURL(blob); var a = document.createElement('a'); a.setAttribute('style', 'display:none'); a.setAttribute('href', csvUrl); a.setAttribute('download', filename); document.body.appendChild(a); a.click() a.remove(); } else { // Data URI var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString); var blob = new Blob([csvString], { type: 'text/csv;charset=utf8' }); var csvUrl = URL.createObjectURL(blob); var a = document.createElement('a'); a.setAttribute('style', 'display:none'); a.setAttribute('target', '_blank'); a.setAttribute('href', csvData); a.setAttribute('download', filename); document.body.appendChild(a); a.click() a.remove(); } }index.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Javascript To Csv</title> <script src="export.js"></script> </head> <body> <button type="button" onclick="exportTableToCsv('example-table', 'Export example')"> Export </button> <table id="example-table" border="1"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>row 1, 'Col1'</td> <td>row 1, 'Col2'</td> <td>row 1, "Col3"</td> </tr> <tr> <td>row 2, 'Col1'</td> <td>row 2, 'Col2'</td> <td>row 2, "Col3"</td> </tr> <tr> <td>row 3, 'Col1'</td> <td>row 3, 'Col2'</td> <td>row 3, "Col3"</td> </tr> <tr> <td>row 4, 'Col1'</td> <td>row 4, 'Col2'</td> <td>row 4, "Col3"</td> </tr> <tr> <td>row 5, 'Col1'</td> <td>row 5, 'Col2'</td> <td>row 5, "Col3"</td> </tr> </tbody> </table> </body> </html>▶실행 결과
[index.html]
[Export example.csv]
[index.html] 페이지에서 Export 버튼을 누르면,
[Export example.csv] 파일이 다운로드 되는 것을 확인할 수 있습니다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
[Javascript] 문자열을 공백 구분자로 split 하는 방법 (0) 2023.04.18 [Javascript] 화면 크기 변경 시에 축소 (1) 2020.02.06 [Javascript] 객체(Object)가 해당 클래스(Class)인지 검사 (0) 2017.12.19 [Javascript] 문자로 된 날짜(Datetime) 유효성 검사 (yyyy-mm-dd hh:ii:ss) (0) 2017.12.19 [Javascript] 객체(Object) 첫번째 키와 값 가져오기 (0) 2017.12.18
export-csv.zip
