View

 

이번에 엑셀다운로드를 구현하는 일을 맡게 되었다.
이전까지는 엑셀 다운로드를 할 때 단일 시트형식이었기 때문에 큰 어려움은 없었다.

하지만 이번에는 테이블에 따라 시트를 나눠달라는 요구사항이 추가 되었다.

여기저기 열심히 구글을 찾아본 결과 SheetJS를 이용하기로 했다.
가장 큰 이유는 상업적용도로 이용 가능하기 때문이었다.

👉 Is SheetJS open source?  

오늘의 목표 : 구현된 테이블 별로 엑셀시트를 만들어 엑셀을 다운로드해보자



1 🔥 JS 파일 다운로드 받기
Download 행에 있는 버튼말고 버전 옆에 있는 버튼 이미지를 눌러야 다운로드 된다.

👉 FileSaver.min.js/v1.3.8  
👉 xlsx.full.min.js/v14.3  

스크립트 단에 해당 스크리브의 주소를 직접 호출해도 작동은 하지만 혹시 모르니 다운로드 받아 사용했다

2 🔥 SheetJS 함수 이용하기
👉 SheetJS_Doc  

해당 사이트에 가면 각종 함수들 설명과 사용방법을 볼 수 있다.
일단 프론트단에 id="tb1", id="tb2", id="tb3"가 있다고 생각하고 함수를 만들어본다

function fnTbInfo_Excel() { 
	//XLSX.utils.book_new() 를 이용해서 새 통합 문서 객체 생성 
    workBook = XLSX.utils.book_new(); 
    
    //테이블을 시트로 변환 (table_to_sheet 이용)
    //워크북을 시트로 변환 (book_append_sheet 이용) 
    XLSX.utils.book_append_sheet(workBook , XLSX.utils.table_to_sheet(document.getElementById('tb1')), "tb1NAME"); 
    XLSX.utils.book_append_sheet(workBook , XLSX.utils.table_to_sheet(document.getElementById('tb2')), "tb2NAME"); 
    XLSX.utils.book_append_sheet(workBook , XLSX.utils.table_to_sheet(document.getElementById('tb3')), "tb3NAME"); 
    
    XLSX.writeFile(workBook, 'excelTest.xlsx', { bookType: 'xlsx', type: 'binary' }); 
  }
  • XLSX.utils.book_append_sheet(workbook, 워크시트, 시트명)
  • XLSX.utils.table_to_sheet(시트로 바꿀 테이블)
  • XLSX.writeFile(워크북, 엑셀이름, 옵션)

이렇게 넣어주면 해당 테이블을 이용해
시트별로 엑셀이 만들어진다!

나는 테이블을 엑셀로 만드는 것이 필요했기 때문에 이 함수들을 썼지만
혹시 다른 것이 필요하다면 저 SheetJS DOC 문서를 참고하시길

다음에 이어지는 포스팅으로는 시트별로 나누어진 엑셀에서
데이터를 JSON형식으로 가져와 처리하는 방법을 적을 예정입니다

Share Link
reply
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31