반응형
SheetJS는 배열, json, html 형태 등 다양한 형태의 데이터로 엑셀 파일을 생성해 주는 오픈 소스이다.
1. 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>
1. 엑셀 Workbook을 생성하고
2. 데이터(배열/json/html table) 가져와서 sheet 만들고
3. workbook에 만든 시트를 추가
4. 엑셀 파일을 만들고
5. 다운로드 받을 수 있게 처리
html table을 다루겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>excel download</title>
</head>
<body>
<header>
<h1>excel download</h1>
</header>
<main>
<button type="button" id="excelDownload" class="download">엑셀파일 다운로드</button>
<table cellSpacing=0 id="tableData">
...
</table>
</main>
<script type="text/javascript" src="js/jquery-3.3.1.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>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
main.js
스크립스에 버튼과 테이블에 대한 클릭 시 exportExcel 함수 호출 과 table의 id값과
파일명, 시트명 등 본인이 설정한 값에 대한 수정을 해준다.
const excelDownload = document.querySelector('#excelDownload');
document.addEventListener('DOMContentLoaded', ()=>{
excelDownload.addEventListener('click', exportExcel);
});
function exportExcel(){
// step 1. workbook 생성
var wb = XLSX.utils.book_new();
// step 2. 시트 만들기
var newWorksheet = excelHandler.getWorksheet();
// step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.
XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());
// step 4. 엑셀 파일 만들기
var wbout = XLSX.write(wb, {bookType:'xlsx', type: 'binary'});
// step 5. 엑셀 파일 내보내기
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());
}
var excelHandler = {
getExcelFileName : function(){
return 'table-test.xlsx'; //파일명
},
getSheetName : function(){
return 'Table Test Sheet'; //시트명
},
getExcelData : function(){
return document.getElementById('tableData'); //TABLE 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;
}
반응형