[JAVASCRIPT] SheetJS로 테이블 데이터 엑셀로 내보내기

html로 작성되어 있는 테이블을 엑셀 데이터로 내보내는 방법은 아주 다양하다. 그 중에서 JAVASCRIPT를 사용하여 내보 엑셀 파일을 내보낼 때는 직접 만들어 작업하기에는 복잡한 부분들이 많아 대부분 SheetJS라는 라이브러리를 사용한다.

사용방법은 직접 SDN 파일을 설치하는 방법과 선언을 통해 라이브러리를 추가해 주는 방법이 있다. 이번 포스팅에서는 선언을 통해 라이브러리를 추가하고, 엑셀로 내보내는 방법까지 알아보겠다.

 

---

테이블이 있는 페이지

 html 

<button id="exportExcel">내보내기</button>
<table id="tableId">
  <tr>
    <td>순서</td>
    <td>회사명</td>
    <td>모델명</td>
    <td>우선순위</td>
  </tr>
  <tr>
    <td>1</td>
    <td>현대</td>
    <td>그렌져</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>기아</td>
    <td>k8</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>현대</td>
    <td>g70</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>쌍용</td>
    <td>토레스</td>
    <td>4</td>
  </tr>
</table>

 

---

 

테이블을 엑셀로 추출하는 소스

 

 JAVASCRIPT 

// 엑셀 파일명에 오늘 날짜를 추가해 주는 위해 날짜 변수 생성
var today = new Date();
var year = today.getFullYear();
var month = ('0' + (today.getMonth() + 1)).slice(-2);
var day = ('0' + today.getDate()).slice(-2);
var dateString = year + month + day;
    
$(document).on("click", "#exportExcel", function(){
	exportExcel(status); // status 변수는 테이블이 여러개일 때 엑셀 명, 시트명을 다르게 지정하기 위해 넣어준다(필요할 때만 사용)
})

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

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

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

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

    // step 5. 엑셀 파일 내보내기 
    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName(status));
}
var excelHandler = {
    getExcelFileName : function(status){
        return dateString+'_'+status+'.xlsx';	// 파일명
    },
    getSheetName : function(){
        return 'Table Sheet';	// 시트명
    },
    getExcelData : function(){
        return document.getElementById('tableId'); 	// 테이블 ID 이부분에도 변수를 통해 다양한 테이블의 아이디 입력 가능
    },
    getWorksheet : function(){
        return XLSX.utils.table_to_sheet(this.getExcelData());
    }
}

function s2ab(wbout) { 
    var arrayBuffer = new ArrayBuffer(wbout.length); // wbout 를 arrayBuffer 로 변환
    var viewer = new Uint8Array(arrayBuffer);  // viewer로 uint8array 생성
    for (var i=0; i<wbout.length; i++) {
    	viewer[i] = wbout.charCodeAt(i) & 0xFF; // octet으로 변환
    }
    return arrayBuffer;    
}