Front end/JS (JavaScript)
자바스크립트 (JavaScript) 테이블 엑셀파일 다운 저장 (excel file down)
큰덩어리
2022. 6. 8. 14:50
728x90
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<div class="excelDownBtn">엑셀 다운</div>
<table id="examTable">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PHONE</td>
</tr>
<tr>
<td>H</td>
<td>홍길동</td>
<td>123</td>
</tr>
<tr>
<td>K</td>
<td>김갑돌</td>
<td>456</td>
</tr>
</table>
<script>
$(".excelDownBtn").on("click",()=>{
if (confirm("Excel file로 저장 하시겠습니까?")) {
exportExcel();
}
});
const excelHandler = {
getExcelFileName : function() {
return 'table.xlsx'; // 테이블이름
},
getSheetName : function() {
return 'Table Sheet'; // 엑셀 하단 시트 이름
},
getExcelData : function() { // EXCEL로 변환하고자 하는 테이블 선택
return document.getElementById('examTable');
},
getWorksheet : function() {
return XLSX.utils.table_to_sheet(this.getExcelData());
}
}
function s2ab(s) {
var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
var view = new Uint8Array(buf); //create uint8array as viewer
for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
return buf;
}
function exportExcel() {
var wb = XLSX.utils.book_new(); // step 1. workbook 생성
var newWorksheet = excelHandler.getWorksheet(); // step 2. 시트 만들기
XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName()); // step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.
var wbout = XLSX.write(wb, {bookType:'xlsx', type: 'binary'}); // step 4. 엑셀 파일 만들기
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName()); // step 5. 엑셀 파일 내보내기
}
</script>
참조 사이트 : https://mesonia.tistory.com/110 [기록의 습관화:)]
728x90