반응형
현재 입력되어 있는 table 형태
나 같은 경우엔 ajax로 api를 받아와서 table이 추가 되게 설정해서 기본 table에는 내용이 별로 없다
그래도 excel로 변환하는데는 아무 지장 없으니 고고!
우선, excel 변환을 하기 위해서는 여러 방법이 있겠지만
이번엔 SheetJS를 통해서 해보도록 하자!
cdn을 사용해도 되고
<!-- SheetJS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<!-- FileSaver saveAs CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
다운받아 사용해도 된다!
npm install xlsx
npm install file-saver --save
우선 세팅은 끝났고!
엑셀로 변환하는 전체 프로세스는 이렇게 된다
1. 엑셀 Workbook 생성
2. 데이터(배열/json/html table)를 가져와 sheet 생성
3. workbook에 만든 시트를 추가
4. 엑셀 파일 생성
5. 다운로드 받도록 처리
앞서 말한 것 처럼 데이터에 따른 방법이 여러개 있지만
나는 HTML table을 excel로 변환 할 예정!
다음 코드를 참고해서 필요한 부분 복사 하자!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sheetjs create xlsx excel example(html table)</title>
<script src="https://code.jquery.com/jquery-3.4.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>
//공통
// 참고 출처 : https://redstapler.co/sheetjs-tutorial-create-xlsx/
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(){
// 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());
}
$(document).ready(function() {
$("#excelFileExport").click(function(){
exportExcel();
});
});
</script>
<script>
var excelHandler = {
getExcelFileName : function(){
return 'table-test.xlsx';
},
getSheetName : function(){
return 'Table Test Sheet';
},
getExcelData : function(){
return document.getElementById('tableData');
},
getWorksheet : function(){
return XLSX.utils.table_to_sheet(this.getExcelData());
}
}
</script>
</head>
<body>
<table id="tableData" style="border:1px solid #dddddd">
<thead>
<tr>
<th>이름</th>
<th>CP</th>
</tr>
</thead>
<tbody>
<tr>
<td>망나뇽</td>
<td>4000</td>
</tr>
<tr>
<td>마기라스</td>
<td>3900</td>
</tr>
<tr>
<td>해피너스</td>
<td>3800</td>
</tr>
</tbody>
</table>
파일 내보내기(HTML TABLE) : <input type="button" id="excelFileExport" value="엑셀 파일 다운로드(TABLE)" />
</body>
</html>
여기서 이 부분을 본인의 table id로 수정!
return document.getElementById('tableData');
return 부분을 수정한다면 파일명, 시트명 등을 바꿀 수도 있다!
증말루다가 이런걸 어떻게 만드는지 ...
SheetJS : JS로 엑셀 파일 쓰기 예제
예전에 UI에서 간단하게 엑셀 파일을 내보내는 것을 해봤습니다. 그때는 그것만으로도 서버쪽 호출 안하고 간단하게 처리할 수 있어 좋아했는데 SheetJS는 배열, json, html 형태 등 다양한 형태의 데
eblo.tistory.com
반응형
'Dev > JS' 카테고리의 다른 글
| JavaScript - 쿠키를 사용해보자! (0) | 2021.02.15 |
|---|---|
| 쿠키(Cookie), 세션(Session), 캐시(Cache) 정리! (0) | 2021.02.15 |
| forEach() vs map() 언제 무엇을 써야할까? (0) | 2020.12.17 |
| for ...in for ...of 반복문 비교!!! + forEach문 추가! (0) | 2020.12.16 |
| JavaScript 객체 기본 중의 기본 중의 기본 중의 기본!! (0) | 2020.12.16 |
