[Javascript] html 테이블을 엑셀 다운로드 하기

▶ SheetJS 라이브러리

<!-- Sheet JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<!--FileSaver savaAs 이용 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

 

[xlsx.full.min.js 다운로드 이용]

https://www.cdnpkg.com/xlsx/file/xlsx.full.min.js/?id=78603

XLSX.FULL.MIN.JS: DOWNLOAD - CDNPKG

 

[FileSaver.js 다운로드 이용]

https://www.cdnpkg.com/FileSaver.js/file/FileSaver.min.js/#

FILESAVER.MIN.JS: DOWNLOAD - CDNPKG

 

▶ 예제 소스 

function exportExcel(){ 
  // 1. workbook 생성
  var wb = XLSX.utils.book_new();

  // 2. 시트 만들기 
  var newWorksheet = excelHandler.getWorksheet();

  // 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.  
  XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());

  // 4. 엑셀 파일 만들기 
  var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});

  // 5. 엑셀 파일 내보내기 
  saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());
}

var excelHandler = {
    getExcelFileName : function(){
        return $("#anpTrnNo").val() + '_수강자목록.xlsx';	// 엑셀 파일명
    },
    getSheetName : function(){
        return $("#anpTrnNo").val() + '_수강자목록';	// 엑셀 시트명
    },
    getExcelData : function(){
        return document.getElementById('tbl_trnTrneInfrList'); 	// 테이블 id
    },
    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;    
}