DEVLOG
[SheetJS] javascript로 테이블을 엑셀파일로 다운로드하기 본문
테이블을 엑셀파일로 다운로드하기 javascript excel download
서버를 통하지 않고 js만으로 html의 테이블을 엑셀파일로 다운로드할 수 있는 방법은 다양하다.
직접 만드는 방법도 있고
라이브러리를 사용하는 방법도 있다.
처음에는 코드를 다 이해하고 직접 만들어보려고 했으나....ㅎㅎㅎㅎ 너무 어리석은 일~~
멋쟁이들이 만들어놓은 라이브러리를 사용하면 아주~ 간단하게 해결할 수 있다!
1. tableToExcel
처음 사용했던 tableToExcel은 비교적 코드도 너무 간단하고 따로 추가해야하는 라이브러리도 없다!
결론부터 얘기하자면... 이거 사용하면 안됨 ㅎㅎㅎㅎ
function tableToExcel(id, title) {
var data_type = 'data:application/vnd.ms-excel;charset=utf-8';
var table_html = encodeURIComponent(document.getElementById(id).outerHTML);
var a = document.createElement('a');
a.href = data_type + ',%EF%BB%BF' + table_html;
a.download = title+'.xls';
a.click();
}여전히 완전 다 아는 것들은 아니지만 그래도 이해하려고 노력한다면 충분히 이해가능한 수준으로 보였다!!
여기서 핵심은 한글 처리 핵심은 %EF%BB%BF (유니코드) 로의 변환인 것 같다.
근데 이거...... 문제점이 있다... 코드를 보면 xls파일로 다운로드를 받게되는데
xls는 2003이하의 옛날 버전 파일이고,
xlsx는 2007이상에서 저장한 요즘 많이 쓰는 파일 확장자이다.
그렇다고 단순히 다운받을때 확장자만 바꾼다고 해서 해결되는 문제도 아니었다 ㅠㅠㅠ
xls에서는 그래도 조회라도 되는데 xlsx로 바꾸면 아예 파일이 안열려버리는 문제가 생긴다.
그래서 다른 방법으로 찾아본
2. SheetJS
SheetJS는 배열, json, 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>
전체적인 프로세스는
1. 엑셀 Workbook을 생성하고
2. 데이터(배열/json/html table) 가져와서 sheet 만들고
3. workbook에 만든 시트를 추가
4. 엑셀 파일을 만들고
5. 다운로드 받을 수 있게 처리
이 글에서는 html table에 대한 부분만 다뤄볼 예정이라 배열이나 json에 대한 부분을 보고싶다면 아래 링크를 참고하도록 하자~~
<!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
+ 버튼이나 테이블에 대한 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;
}
위 코드를 사용하면 xlsx파일로 정상적으로 다운로드 된다!!
굳굳~
