React.js 엑셀 스타일 적용하기, xlsx-js-style

React.js로 엑셀 시트 만들거나 셀을 정해서 자동으로 입력해 줄 수 있습니다. 전에 xlsx모듈을 이용하였지만 이 모듈은 엑셀 스타일을 정하려면 돈을 내야 되기 때문에 저희는 xlsx-js-style을 사용하겠습니다. 오늘은 xlsx-js-style을 통해서 스타일을 어떻게 설정하는지 알아보겠습니다.

---

[목차]

1. 엑셀 생성, 쓰기
2. 엑셀 셀 선택
3. 엑셀 정렬 , 테두리 
4. 엑셀 채우기, 글꼴

---

반응형

 

 

1. 엑셀 생성, 쓰기

 

xlsx-js-style은 xlsx 모듈의 상위호환 버전입니다. 그렇기 때문에 xlsx의 함수 대부분을 함께 쓸 수 있으며 호환도 가능합니다. 단지 스타일 부분만 유료였던 것을 무료로 추가한 것이기 때문에 그대로 쓰셔도 무방합니다. 상세한 설치과정이나 기본 사용법을 보시려면 전 포스팅을 참조해 주세요. 

 

2022.11.28 - [취미로 코딩하기] - React.js로 엑셀 다루기, xlsx

React.js로 엑셀 다루기, xlsx

 

React.js도 node를 이용하기 때문에 node를 이용해서 xlsx-js-style 을 설치해 줍니다. 

 

npm install xlsx-js-style 

 

이 명령어를 통해서 package.json 파일을 살펴보면 xlsx-js-style이 설치되어 있는 것을 알 수 있습니다. 

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

const wb = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(wb, ws, "demo");

XLSX.writeFile(wb, "xlsx-js-style.xlsx");

import를 xlsx-js-style로 해주고 워크북을 만들어줍니다. 시트는 wb 변수로 받아주며 XLSX.utils.book_new() 메서드를 사용하여 생성해 줍니다. 워크북은 워크시트를 담는 포괄적인 개념입니다. wb는 워크북을 하나 만들어주는 것이고 이 워크북에다 어떤 워크시트를 넣을지는 저희가 배열로 정의해주어서 넣어줍니다. 

 

book_append_sheet 메소드를 통해서 만들어진 ws(워크시트)를 넣어줍니다. 여러 개 넣을 수도 있습니다. 

 

워크시트 개념

위의 그림과 같이 워크북 > 워크시트 > 셀 파일 개념입니다. 이와 같이 완성된 파일은 워크북으로 만들어서 파일로 내보내게 됩니다. 

 

반응형

 

2. 엑셀 셀 선택

 

이제 워크시트에 셀에 접근해서 내가 원하는 텍스트를 넣고 싶을 때 선택을 하는 방법을 살펴보겠습니다.

워크시트 셀에 데이터를 넣는 방법은 많습니다. 일단 개별적으로 넣는 방법은 cell함수를 이용하는 것입니다. 

const ws = wb.addWorksheet('Sheet1');
const cell = ws.cell(1, 2);
cell.string('Hello!');

우선 워크시트 변수를 만드는 것은 필수입니다. 이 워크시트의 셀의 1행 1열에 접근하여 Hello!라는 데이터값을 넣어주는 것입니다. 다량의 데이터를 넣을 때는 좋지 않으며 엑셀파일을 읽고 넣어줄 때 유용합니다.

 

const data = [
  ['Name', 'Age', 'City'],
  ['Yunseong', 12, 'Seoul'],
  ['Jane', 33, 'Los Angeles'],
  ['Johnson', 22, 'Chicago'],
];

const tempWs = XLSX.utils.aoa_to_sheet(data);

데이터를 넣어서 엑셀의 셀을 채우는 예제입니다. 배열안에 배열을 사용하여 맨 앞 배열은 제목 행과 열입니다. 그대로 배열을 넣어주면 워크시트에 쏙 들어갑니다. 참 쉽게 엑셀 시트를 제어할 수 있습니다. 

 

이 워크시트를 워크북에 넣어줘서 파일로 빼주면 엑셀에 원하는 데이터를 넣어서 파일을 만들 수 있습니다. 이제 어떤 데이터를 넣어서 표시해 줄지 생각만 해주면 됩니다. 

 

반응형

 

3. 엑셀 정렬 및 테두리

 

이제 셀에서 스타일을 사용할 차례입니다. cell의 스타일을 적용하려면 스타일 파일을 셀에 넣어줘야합니다. 

셀에 각각 스타일을 적용하려면 워크시트의 각각 셀에 접근하여야하고 셀의 모든 시트에 적용하려면 워크북에 적용하여야 합니다. 

// 각각 셀에 적용
ws.cell(1, 1).style(
{ alignment : {horizontal: 'left'}}
);

// 각 열에 전체 적용
ws["!cols"] = [
      { wpx: 130, alignment: { horizontal: "center" } }, // A열
      { wpx: 180 }, // B열
      { wpx: 180 }, // C열
      { wpx: 100 }, // D열
      { wpx: 100 }, // C열
    ];

wpx는 셀의 넓이를 정하는 것이고 alignment는 정렬을 의미합니다. 

 

alignment 속성

alignment의 속성에는 vertical, horizontal, wrapText 등의 옵션이 있습니다. 대부분 horizontal을 사용합니다. 테두리에 대한 부분도 위와 같이 Dictionary 옵션 값으로 넣어줍니다. 

border: {
    left: {
      style: 'thin',
      color: '#000000'
    }
}

BORDER_STYLE에는 thin, thick, medium, dash, dotted 등 여러 옵션이 있습니다. color의 경우는 

 

xlsx colorstyle

으로 설정할 수 있습니다. 

 

 

반응형

 

4. 엑셀 채우기 및 글꼴

 

xlsx 채우기 및 글꼴

엑셀에 채우기를 많이 사용하지 않긴 하지만 강조할 부분이나 표시할 부분이 있을 수 있습니다. 폰트는 현재 운영체제에 있는 폰트 이름 그대로 사용해야합니다. 글꼴을 추가할 수 있으며 브라우저에서 지원하는 글꼴과 비슷하게 bold, italic 등의 속성을 추가할 수도 있습니다. 

 

 font: {
    color: '#ffffff',
    bold: true,
    size: 11,
    name: 'Arial'
  },
  fill: {
    type: 'pattern',
    patternType: 'solid',
    fgColor: '#0070c0'
  }

이 모든 것을 cell.style에 적용하면 됩니다. 배열로 제어하는 것이 행과 열을 제어하기엔 편합니다. 그러므로 for문을 잘 이용해서 각 셀에 맞는 스타일을 지정하면 됩니다. 

 

원하는 행에 스타일을 적용하려면

for (let i = 1; i <= 10; i++) {
  ws.cell(5, i).style(myStyle);
}

이와 같이 반복하면 됩니다. 다음 포스팅에서 뵙겠습니다. 

 

 

 

---

[함께 읽으면 좋은 글]

2022.11.28 - [취미로 코딩하기] - React.js로 엑셀 다루기, xlsx

React.js로 엑셀 다루기, xlsx

2022.11.27 - [취미로 코딩하기] - React.js, 화면 그리기 스타일링

React.js, 화면 그리기 스타일링

 

 

---