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