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

- SheetJS 엑셀 다운로드 -

 

개발을 하다 보면 엑셀 파일로 다운로드할 수 있게 해야 하는 기능을 구현해야 하는 경우가 있다. 

 

아마 가장 많이 나오는 경우가 JSON 형태의 데이터를 엑셀로 다운로드시켜주는 기능일 것이다.

 

이때 Javascript로 클라이언트 단에서 엑셀 다운로드를 구현하는데 이 때 사용되는 javascript 라이브러리가 SheetJs이다.

 

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

 

이 포스트에서는 SheetJS의 기능중 하나인 excel 파일 다운로드 기능에 대해서 포스팅할 것이다.

 

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

 

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

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

github.com/eligrey/FileSaver.js에서 dist 폴더 안에 있는 FileSaver.min.js 다운받고 스크립트를 추가한다.

파일을 다운 받기를 위해 FileSaver를 추가했다.

<script src="sheetjs/dist/xlsx.full.min.js"></script>
<script src="FileSaver/dist/FileSaver.min.js"></script>

 

2. sheetJS 엑셀 다운로드 구현

기본적인 SheetJS를 사용하여 엑셀 파일을 만드는 방법이다. 

<script>
    // ArrayBuffer 만들어주는 함수
    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;
    }

    // workbook 생성
    var wb = XLSX.utils.book_new();

    // 문서 속성세팅 ( 윈도우에서 엑셀 오른쪽 클릭 속성 -> 자세히에 있는 값들
    // 필요 없으면 안써도 괜찮다.
    wb.Props = {
        Title: "title",
        Subject: "subject",
        Author: "programmer93",
        Manager: "Manager",
        Company: "Company",
        Category: "Category",
        Keywords: "Keywords",
        Comments: "Comments",
        LastAuthor: "programmer93",
        CreatedDate: new Date(2021,01,13)
    };

    // sheet명 생성
    wb.SheetNames.push("sheet 1");
    // wb.SheetNames.push("sheet 2"); // 시트가 여러개인 경우

    // 이중 배열 형태로 데이터가 들어간다.
    var wsData = [['A1' , 'A2', 'A3'],['B1','B2','B3'],['C1','C2']];
	// var wsData2 = [['가1' , '가2', '가3'],['나1','나2','나3']];	// 시트가 여러개인 경우

    // 배열 데이터로 시트 데이터 생성
    var ws = XLSX.utils.aoa_to_sheet(wsData);
	// var ws2 = XLSX.utils.aoa_to_sheet(wsData2); 	//시트가 여러개인 경우
    
    // 시트 데이터를 시트에 넣기 ( 시트 명이 없는 시트인경우 첫번째 시트에 데이터가 들어감 )
    wb.Sheets["sheet 1"] = ws;
    // wb.Sheets["sheet 2"] = ws2;	//시트가 여러개인 경우

    // 엑셀 파일 쓰기
    var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});

    // 파일 다운로드
    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), '엑셀_다운로드.xlsx');
</script>

 

각 라인에 주석에 설명을 달아놨다.

 

시트 여러개에서 각각 다른 정보를 보여줘야 한다면 아주 간단하게 그냥 시트를 하나 더 만들어서 거기에 데이터를 매핑시켜주면 된다. 딱 코드를 보면 느낌이 올 것이다.

 

wb.Props를 설정을 하면 아래와 같이 문서의 속성을 넣어줄 수 있다.

 

엑셀_다운로드.xlsx 파일

 

JSON 데이터를 변환하는 방법은 JSON을 이중 배열 형태로 만들어서 데이터를 넣어주면 된다.

( var wsData = [['A1' , 'A2', 'A3'],['B1','B2','B3'],['C1','C2']]; 부분 참고 )

 

위에 정도로만 구현을 할 수 있다면 웹에서 엑셀을 다운로드 하는 기능에는 크게 문제가 되지는 않는다.

 

만약 위에보다 더 정교한 엑셀 기능이 필요하다면 SheetJS의 유료버전을 구매하거나 Java 라이브러리를 이용하는게 좋다.

 

 

---

HTML table을  SheetJS를 사용해서 엑셀로 변환하는 방법

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