[Javascript] SheetJS: Excel 다운로드

HTML의 테이블을 엑셀 파일로 다운로드하는 기능을 구현했다.
일하면서 DataTables 라이브러리를 통해 UI의 테이블을 엑셀 다운로드해보았는데, 이번에는 SheetJS를 사용해보았다.

🥑 SheetJS

• Javascript로 클라이언트 단에서 엑셀 다운로드를 구현하는데 이때 사용하는 라이브러리가 SheetJS 이다.
• SheetJS로 배열, json, html(table) 형태 등 다양한 형태의 데이터로 엑셀 파일을 다운로드 시켜줄 수 있다.

이 포스트에서는 HTML Table 태그를 엑셀 파일(.XLSX)로 변환하는 방법을 소개할 것이다.

1. To Know

🥕 순서

① 엑셀 workbook 생성
② 데이터(배열/json/html table) 가져와서 sheet 만듦
③ workbook에 만든 시트 추가
④ 엑셀 파일 생성
⑤ 다운로드 가능하도록 처리

XLSX.utils 제공 기능

• aoa_to_sheet converts an array of arrays of JS data to a worksheet.
• json_to_sheet converts an array of JS objects to a worksheet.
• table_to_sheet converts a DOM TABLE element to a worksheet.
• sheet_add_aoa adds an array of arrays of JS data to an existing worksheet.
• sheet_add_json adds an array of JS objects to an existing worksheet.

2. Library 추가

<!-- SheetJS -->
<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>

3. Source code - HTML Table

[HTML]

<div class="main-content">
	<!-- TABLE -->
	<table id="testTbl" class="table table-sorting table-hover table-bordered table-dark-header datatable">
		<thead></thead>
		<tbody class="text-center">
		<tr style="background-color:#b2beb5;">
			<th rowspan="2" class="text-center"><br>No<br></th>
			<th colspan="2" class="text-center">Name</th>
			<th rowspan="2" class="text-center"><br>Addr</th>
		</tr>
		<tr style="background-color:#b2beb5;">
			<th class="text-center">First</th>
			<th class="text-center">Last</th>
		</tr>
		<tr>
			<td></td>
			<td>-</td>
			<td>1</td>
			<td></td>
		</tr>
		<tr>
			<td>12</td>
			<td></td>
			<td></td>
			<td>-</td>
		</tr>
		<tr>
			<td>8</td>
			<td>2</td>
			<td>-</td>
			<td>1</td>
			<td>1</td>
		</tr>
		</tbody>
	</table>
	<!-- END TABLE -->
	<div class="row">
		<div class="col-xs-12 text-right">
			<button type="button" class="btn btn-sm btn-default" onclick="excelFileExport();">
				<i class="fa fa-plus"></i>다운로드</button>
		</div>
	</div>
</div>

[js]

function excelFileExport() {
    // step 1. workbook 생성
    let wb = XLSX.utils.book_new();

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

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

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

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

}

const excelHandler = {
    getExcelFileName : function(){
        return 'table_'+moment().format('YYYY-MM-DD HH:mm:ss')+'.xlsx';
    },
    getSheetName : function(){
        return 'test-1';
    },
    getExcelData : function(){
        return document.getElementById('testTbl');
    },
    getWorksheet : function(){
        return XLSX.utils.table_to_sheet(this.getExcelData());
    }
}

function s2ab(s) {
    let buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
    let view = new Uint8Array(buf);  //create uint8array as viewer
    for (let i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
    return buf;
}

[예시]

Reference

• https://eblo.tistory.com/84
• https://programmer93.tistory.com/66