▶Javascript 테이블을 CSV 파일로 다운로드

▶설명

테이블에 있는 데이터를 CSV 파일로 다운로드하고 싶은 경우 사용하는 코드입니다.

출처는 아래의 주소입니다.

출처 : https://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html

출처에는 jQuery를 사용한 방법으로 작성됐기 때문에,

제가 기존의 코드에서 변경한 점을 작성하자면 아래와 같습니다.

jQuery가 아닌 Javascript로 동작하도록 수정
파일이 UTF-8 BOM이 되도록 처리하였습니다. (엑셀로 볼 때, 한글 깨짐 현상 방지)

▶예제

export-csv.zip

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] 파일이 다운로드 되는 것을 확인할 수 있습니다.