[JavaScript] <table> 데이터 csv 다운로드 (download table data to csv file)

 

테이블은 아래와 같이 thead > tr > th 로 header가 구성되어 있고, tbody > tr > td 로 body가 구성되어 있는 구조라고 가정함.

<table id="tbl">
<thead>
    <tr>
        <th>col_1</th>
        <th>col_2</th>
        <th>col_3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>cell_11</td>
        <td>cell_12</td>
        <td>cell_13</td>
    </tr>
    <tr>
        <td>cell_21</td>
        <td>cell_22</td>
        <td>cell_23</td>
    </tr>
</tbody>
</table>

 

// #tbl 테이블의 데이터를 csv로 다운로드
downloadCsv(document.getElementById('tbl'));
 
 
 
// 지정한 <table>의 데이터를 csv로 다운로드
function downloadCsv(tbl, filename)
{
    let csvString = '';
 
    // header
    const header = [];
    tbl.querySelectorAll('thead th').forEach((th)=>{
        header.push(`"${th.innerText}"`);
    });
    csvString += header.join(',') + "\n";
 
    // body
    tbl.querySelectorAll('tbody tr').forEach((tr)=>{
        const rowData = [];
        tr.querySelectorAll('td').forEach((td)=>{
            rowData.push(`"${td.innerText}"`);
        });
 
        csvString += rowData.join(',') + "\n";
    });
    csvString = csvString.trim();
 
    // download csv
    const blob = new Blob(["\ufeff" + csvString], {type: 'text/csv;charset=utf-8'});
    const csvUrl = URL.createObjectURL(blob);
    const 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();
}