반응형
자바스크립트에서 table 내용 엑셀 다운로드
HTML 로 table 을 생성하고, 해당 table 에 뿌려진 데이터를 엑셀로 다운로드 받을 수 있도록 하는 기능을 알아봅시다.
회사 프로젝트 내에 동일한 기능이 있었지만, Back-End 까지 코드를 수정해야하기 때문에 번거로웠습니다. 백엔드까지 가지않고, 프론트에서 해결할 수 있는 방법을 드디어 찾았습니다.
먼저, 엑셀 다운로드하고자 하는 table 에 class 또는 id 를 부여합니다. 예를 들면, 아래와 같이 구현되어있을 것입니다.
<table class="table" id="resultTable">
<thead>
<tr>
<td>sample</td>
<td>sample</td>
<td>sample</td>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data5</td>
<td>data6</td>
</tr>
</tbody>
</table>제가 회사에서 사용한 table 은 동적으로 생성되었으므로, 위에처럼 구성되어있진 않지만 참고용으로 만들었습니다. 그리고 엑셀 다운로드 버튼이 있어야겠죠?
<button type="button" id="btnExcel"><span>엑셀다운로드</span></button>이러한 버튼을 추가해줍니다.
위 버튼내에 onclick 이벤트를 만들어주거나 jQuery 를 사용하며 click event function 을 만들어줍니다. 그 안에 아래와 같은 코드만 넣어주면 성공!
// 엑셀 다운로드
function fnExcelDownload(id, title) {
var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
tab_text += '<head><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
tab_text += '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
tab_text += '<x:Name>Sheet</x:Name>';
tab_text += '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
tab_text += '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
tab_text += "<table border='1px'>";
var exportTable = $('#' + id).clone();
exportTable.find('input').each(function (index, elem) { $(elem).remove(); });
tab_text += exportTable.html();
tab_text += '</table></body></html>';
var data_type = 'data:application/vnd.ms-excel';
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var fileName = title + '.xls';
// IE 환경에서 다운로드
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
if (window.navigator.msSaveBlob) {
var blob = new Blob([tab_text], {
type: "application/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, fileName);
}
} else {
var blob2 = new Blob([tab_text], {
type: "application/csv;charset=utf-8;"
});
var filename = fileName;
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob2);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
};
저는 따로 함수로 만들어서 버튼을 클릭할 때마다 해당 함수가 실행되도록 만들었습니다. 위 코드는 Chrome 뿐만 아니라 IE 환경에서도 실행이 잘되는 것을 확인하였습니다.
다만, 다중 시트를 만들어서 2개의 HTML table 을 Excel 로 export 하는 건 아직 진행중입니다 ㅠㅠ...
감사합니다.
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [error] Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed? (3) | 2021.11.03 |
|---|---|
| jqGrid 선택한 행 삭제하는 방법 (0) | 2021.06.17 |
| [ES6] WeakSet, WeakMap (0) | 2020.06.13 |
| [JavaScript] 프로토타입(prototype)_2편 (0) | 2020.05.24 |
| [JavaScript] 프로토타입(prototype)_1편 (0) | 2020.05.06 |
최근댓글