Blog.

데이터를 통한 엑셀 파일 생성

설치설명사용결과
관리자 같은 페이지를 작업하다 보면 테이블의 리스트 데이터를 엑셀 파일로 다운받아 공유해야 하는 일이 생긴다.
 
그런 경우 xlsx-js-style 라이브러리를 통해 리스트 데이터를 엑셀 파일로 생성 후 다운받을 수 있다.
💡
codesandbox 에서 실행할 수 있다. (새 창에서 정상 동작)

설치

xlsx 라이브러리도 있지만 xlsx 는 스타일 적용이 유료이기 때문에 사용하지 않았다.

설명

사용

  1. useExportExcel() 생성
      2. 해당 hook 에서 exportExcel() 함수의 인자를 통해 설정 데이터를 전달 받고, 기본 스타일들을 설정해서 엑셀 파일을 생성한다.
  1. useExportExcel() 사용

    결과

    notion image
    notion image
     
     
    참고
    npm: xlsx-js-style
    SheetJS Spreadsheet Community Edition plus Basic Cell Styles. Latest version: 1.2.0, last published: a year ago. Start using xlsx-js-style in your project by running `npm i xlsx-js-style`. There are 50 other projects in the npm registry using xlsx-js-style.
    npm: xlsx-js-style
    https://www.npmjs.com/package/xlsx-js-style
    npm: xlsx-js-style
    React.js 엑셀 스타일 적용하기, xlsx-js-style
    React.js로 엑셀 시트 만들거나 셀을 정해서 자동으로 입력해 줄 수 있습니다. 전에 xlsx모듈을 이용하였지만 이 모듈은 엑셀 스타일을 정하려면 돈을 내야 되기 때문에 저희는 xlsx-js-style을 사용하겠습니다. 오늘은 xlsx-js-style을 통해서 스타일을 어떻게 설정하는지 알아보겠습니다. [목차] 엑셀 생성, 쓰기 엑셀 셀 선택 엑셀 정렬 , 테두리 엑셀 채우기, 글꼴 1. 엑셀 생성, 쓰기 xlsx-js-style은 xlsx 모듈의 상위호환 버전입니다. 그렇기 때문에 xlsx의 함수 대부분을 함께 쓸 수 있으며 호환도 가능합니다. 단지 스타일 부분만 유료였던 것을 무료로 추가한 것이기 때문에 그대로 쓰셔도 무방합니다. 상세한 설치과정이나 기본 사용법을 보시려면 전 포스팅을 참조해 주세..
    React.js 엑셀 스타일 적용하기, xlsx-js-style
    https://commnetall.tistory.com/74
    React.js 엑셀 스타일 적용하기, xlsx-js-style