SheetJS 사용법 - HTML table을 엑셀로 변환하기 - 삽질중인 개발자

- SheetJS HTML 테이블을 Excel 파일로 만들기 -

 

웹 개발을 하다보면 HTML 테이블에 그려진 화면을 엑셀 파일로 다운로드 하는 기능을 추가해달라는 요청이 종종 있다.

 

엑셀 다운로드 기능을 구현하는 방법에는 첫번째로 서버에서 엑셀을 만들어서 다운로드하게 해주는 방법이 있고 두번째로는 브라우저에서 엑셀 파일을 만들어서 다운 받게 하는 방법이 있다.

 

서버에서 엑셀 파일을 만들게 되면 I/O 작업이 있어 서버의 부하가 생기기에 보통 클라이언트쪽(javascript)에서 처리를 많이한다.

 

이때 사용하는 자바스크립트 라이브러리가 SheetJS 라는 라이브러리다.

 

이 SheetJS 라이브러리는 무료버전과 유료버전이 존재하는데 무료 버전에 디테일한 기능은 좀 부족하긴해도 엑셀 데이터를 뽑아주는 기능은 문제가 없어 아주 괜찮은 라이브러리이다.

 

이 포스트에서는 SheetJS의 기능중 하나인 HTML Table Tag를 excel 파일(XLSX 파일 )로 변환하는 방법에 대해서 포스팅을 할것이다.

 

우선 사용전 IE6~IE9 ,IOS safari에서는 해당기능이 정상 작동하지 않을 수도 있다는 점을 알아두자.

 

 

---

sheetjs 사용법

 

1. SheetJS 다운로드 및 스크립트 태그 추가

https://github.com/SheetJS/sheetjs에서 dist 폴더 안에 있는 xlsx.full.min.js 다운받고 스크립트를 추가한다.

<script lang="javascript" src="dist/xlsx.full.min.js"></script>

 

2. Table 태그 만들기

엑셀로 변경해야하는 대상 테이블에 id를 지정한다.

    <table id="mytable">
    	<thead>
    		<tr>
    			<th>상품 명</th>
    			<th>가격</th>
    			<th>재고</th>
    			<th>등록일</th>
    			<th>판매자 전화번호</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>갤럭시 S </td>
    			<td>90만원</td>
    			<td>1</td>
    			<td>2012.01.01</td>
    			<td>010-1234-7894</td>
    		</tr>
    		<tr>
    			<td>아이폰 12</td>
    			<td>990$</td>
    			<td>010</td>
    			<td>2020.01.01</td>
    			<td>01012347894</td>
    		</tr>
    		<tr>
    			<td>辛라면</td>
    			<td>650원</td>
    			<td>96</td>
    			<td>2020.01.01</td>
    			<td>042-128-1434</td>
    		</tr>
    	</tbody>
    </table>

 

3. 엑셀 다운로드

var wb = XLSX.utils.table_to_book(document.getElementById('mytable'), {sheet:"시트명",raw:true});
XLSX.writeFile(wb, ('파일명.xlsx'));

 

대상 테이블을 지정후 document.getElementById("mytable") 로 table DOM을 가져온 후 XLSX.utils.talbe_to_book이라는 유틸에 해당 DOM과 옵션을 넣어서 바이너리 파일을 만들고 해당 파일을 저장하는 방식이다.

 

이때 사용하는 옵션은 여러가지가 있는데 보통 테이블에서 가져오는 경우는 시트명과 raw 정도만 설정해주면 된다.

 

옵션 설명 

sheet : 시트 명을 세팅하는 옵션이다.

raw : raw 옵션은 default가 false이다.  이 옵션이 false이면 01012347894라는 휴대폰 번호가 숫자로 인식이 되어서 1012347894로 엑셀에 출력을 해준다. 이 옵션을 true로 바꾸면 01012347894와 같은 문자열이 01012347894로 나오게 된다.

 

SheetJS를 사용해서 HTML 테이블을 excel로 출력하는 방법은 아주 간단해서 테이블을 엑셀로 변경해야할 때 편하게 사용할 수 있다.

 

이 다음 포스팅은 SheetJS을 사용하여 JSON 형태의 데이터를 엑셀로 변환하는 방법을 포스팅한다.

 

---

 

SheetJS 엑셀 파일 다운로드

SheetJS 사용법 - 엑셀 파일 다운로드 - 삽질중인 개발자