[React] xlsx-js-style

📱테스트 환경

"react": "18.3.0",
"react-dom": "18.3.0"

---

React 에서 엑셀을 다운받는 기능을 추가하려고 한다.

처음에는 xlsx 를 이용했는데 넘 못생겨서 스타일을 추가하려고 하니

xlsx-js-style 라이브러리를 이용하면 된다고 해서 사용했다.

예제만 따라해도 쉽게 사용할 수 있어서 금방 적용할 수 있었다.

내 코드는 다음과 같다.

import * as XLSX from "xlsx-js-style";

export const excelDownLoad = (data: any) => {
    const worksheet = XLSX.utils.json_to_sheet(data);

    const headerStyle = {
        font: {bold: true, color: {rgb: "FFFFFF"}},
        fill: {fgColor: {rgb: "5BC2E7"}},
        alignment: {horizontal: "center", vertical: "center"},
    };

    const cellStyle = {
        alignment: {horizontal: "center", vertical: "center"},
    }

    Object.keys(data[0]).forEach((_, colIndex) => {
        const cellAddress = XLSX.utils.encode_cell({r: 0, c: colIndex});
        if (worksheet[cellAddress]) {
            worksheet[cellAddress].s = headerStyle;
        }
    });

    Object.keys(worksheet).forEach((key) => {
        if (key.startsWith("!")) return;
        if (!worksheet[key].s) {
            worksheet[key].s = cellStyle;
        }
    })

    worksheet["!cols"] = Object.keys(data[0]).map(() => ({wpx: 150}));

    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "StyledSheet");

    XLSX.writeFile(workbook, "styled-example.xlsx");
}

Data 타입을 정해주면 좋겠지만

사용하는 곳이 많아 데이터를 특정하기가 어려워 임시로 any 를 사용중이다.

any 는 권장하지않기 때문에 타입을 꼭 정해주길 바란다.

Object.keys(data[0]).forEach((_, colIndex)

이 부분이 최상단 헤더 부분을 스타일 하는 부분이고

Object.keys(worksheet).forEach((key) => {

이 부분이 나머지 컬럼들을 스타일 하는 부분이다.

worksheet["!cols"] = Object.keys(data[0]).map(() => ({wpx: 150}));

넓이를 지정하는 부분인데 동적으로 글자갯수에 따라 늘어나게 하면 좋았겠지만

글자가 한글 영어 다 계산해서 하기엔 좀 귀찮음+복잡함

그래서 그냥 20자 정도로 계산하고 150 넓이 주고니까 좀 깔끔하니 이쁘다.