1. SheetJS 라이브러리

구글에 검색해보면 참고할 문서가 있다.

common use cases 의 Live Demos 버튼을 클릭

Export Table 버튼 클릭 하면 아래와 같이 예시가 나온다.

해당 페이지에서 마우스 오른쪽누른후 페이지 소스 보기하면 소스를 확인 할 수 있다.
엑셀을 처리하는 곳은 여기고

버튼처리는 여기이다.

위를 바탕으로 이제 구현 시작 ~

2. 구현

2-1. jsp에 SheetJS에 필요한 script 를 추가

<!-- Sheet JS -->
<script src="${contextPath}/js/si/xlsx.full.min.js"></script>
<!--FileSaver savaAs 이용 -->
<script src="${contextPath}/js/si/FileSaver.min.js"></script>

직접 다운로드하여 라이브러리를 사용하거나 Html Snippet복사하여 추가해서 사용해도 된다.
FileSaver.js
https://www.cdnpkg.com/FileSaver.js/file/FileSaver.min.js/#
xlsx.full.min.js
https://www.cdnpkg.com/xlsx/file/xlsx.full.min.js/?id=78603

2-2. 버튼과 테이블 추가하기

테이블의 경우는 pivot.js 라이브러리를 이용하여 자동생성 되게

            <div class="btnBox">
               <button id = "excelDownload" class="btn01">엑셀다운로드</button>
            </div>
          <!--  피벗테이블  -->
          <div id="output">  </div>

2-3. 버튼 클릭시 함수 호출 하기

            //엑셀 다운로드 클릭 시
            $('#excelDownload').on('click', function(e) {
                $main.event.exelDownloadByHtml();

            });

        exelDownloadByHtml: function() {
            let filename = '파일명_.xlsx';

            let wb = XLSX.utils.table_to_book(document.getElementsByClassName('pvtTable')[0], { sheet: '시트명', raw: true });
            XLSX.writeFile(wb, (filename));
        }

이렇게만 작성하면 엑셀다운로드가 쉽게 완성된다. ~

끝