카테고리 없음
Javascript 테이블을 CSV 파일로 다운로드
광82
2023. 7. 12. 11:36
반응형
설명
테이블에 있는 데이터를 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] 파일이 다운로드 되는 것을 확인할 수 있습니다.
반응형