클라이언트 엑셀 모듈 추천 (client-excel-module)

클라이언트에서 엑셀 다운로드? 이 모듈 하나면 충분합니다 – client-excel-module 소개

프론트엔드를 하다 보면 엑셀 다운로드 기능은 정말 자주 등장하는 요구사항 중 하나입니다.
특히 관리자 페이지나 통계 페이지를 만들다 보면 엑셀로 내보내기는 거의 필수죠.

보통은 Java + POI 조합?

백엔드가 Java라면 대부분 Apache POI를 사용해서 엑셀을 생성합니다. 강력하긴 하지만…

• 설정 복잡하고,
• 러닝 커브도 제법 있고,
• 결국 서버 API를 만들어야 하니 관리 포인트가 늘어나고…

이런 경험, 다들 한 번쯤 해봤을 거예요. 특히 작은 기능을 위해 백엔드까지 건드리는 건 꽤 비효율적이죠.

---

클라이언트에서 바로 엑셀을?

그래서 프론트에서 직접 엑셀을 만들 수 있으면 좋겠다고 생각하게 됩니다.
그때 보통 가장 먼저 떠오르는 게 바로 SheetJS (xlsx.js).

정말 유명하고, 기능도 많지만…

• 멀티헤더 처리할 때 삽질,
• 워크시트 여러 개 만들기 번거로움,
• 스타일 적용은 거의 불가능하거나 귀찮고,
• 업로드 처리도 직접 구현해야 함

하다 보면 결국 “이걸 내가 다 짜야 하나…?” 싶은 순간이 옵니다.

---

그래서 찾은 가벼운 대안: client-excel-module

최근에 정말 괜찮은 모듈 하나를 발견했습니다. 이름은 client-excel-module.
SheetJS 기반으로 만들었고 기능을 훨씬 간단하고, 가볍고, 실용적인 기능에 집중된 모듈이에요.

★ npm: https://www.npmjs.com/package/client-excel-module
☆ github: https://github.com/decompanyio/client-excel-module

어떤 점이 좋았냐면

• 기본 엑셀 다운로드 기능이 매우 간단
• 멀티 헤더도 쉽게 처리 가능
• 워크시트 여러 개도 만들 수 있음
• 타입스크립트 기반이라 타입도 친절하게 제공
• 한국 개발자가 만든 모듈이라 한국 환경에 잘 맞는 사용성
• 앞으로도 기능이 계속 추가될 예정 (컨트리뷰터로도 참여 중!)

사용 예시 (간단하게!)

import { downloadExcel } from 'client-excel-module'

downloadExcel({
  filename: '샘플_엑셀',
  sheets: [
    {
      name: '첫번째 시트',
      headers: ['이름', '나이', '이메일'],
      data: [
        ['홍길동', 30, 'hong@example.com'],
        ['김철수', 28, 'kim@example.com'],
      ],
    },
  ],
})

이 정도면 충분하죠.
복잡한 설정이나 스타일링 없이도 바로 엑셀 파일 생성이 가능합니다.

지금도 컨트리뷰터로 참여 중!

직접 이슈를 열면, 빠르게 피드백도 주시고 개발도 진행 예정.
지금도 컬럼 스타일이라든가, 날짜 포맷 등 추가 기능을 논의하고 있고요. 머지 기능까지도!?

마무리하며

SheetJS도 좋지만, “기본적인 엑셀 다운로드 기능만 빠르게 구현하고 싶다”는 경우엔
client-excel-module이 진짜 추천입니다.

• 백엔드 작업 필요 없음
• 코드 깔끔함
• 프론트에서 필요한 핵심 기능에 집중

관리자 페이지 만들고 있거나, 엑셀 기능 때문에 고민 중이라면 꼭 한 번 써보세요.

실제로 현재 관리자 페이지에 적용해서 사용 중.

 

아래는 리액트 프로젝트에서 컴포넌트화 해서 사용하는 로직 입니다.

import { downloadExcel, ExcelCellStyle } from 'client-excel-module'

import { PiMicrosoftExcelLogoFill } from 'react-icons/pi'

// 참고: https://github.com/decompanyio/client-excel-module
type ExcelDownalodProps = {
  sheetsData: any
  filename?: string
  type?: 'xlsx' | 'xls' | 'csv' | 'txt'
  styleOptions?: {
    headerStyle?: ExcelCellStyle
    bodyStyle?: ExcelCellStyle
  }
  multiHeadersMap?: Record<string, string[][]>
}

const ExcelDownload = ({
  sheetsData,
  filename = 'excel',
  type = 'xlsx',
  styleOptions,
  multiHeadersMap,
}: ExcelDownalodProps) => {
  const exceldownloadHandler = () => {
    downloadExcel({
      sheetsData,
      filename,
      type,
      styleOptions,
      multiHeadersMap,
    })
  }

  return (
    <PiMicrosoftExcelLogoFill
      style={{ cursor: 'pointer', color: '#217346' }}
      size={30}
      onClick={exceldownloadHandler}
    />
  )
}

export default ExcelDownload

 

실제 d.ts 를 까보면 아래와 같이 주석, 코드가 정리가 잘 되어있어서 한 눈에 확인 가능.

 

+ 업로드도 지원되어서 한 번 사용해보시는 것도 추천드립니다.