React.js에서 엑셀 파일 다루기, xlsx 보다는 xlsx-js-style

https://commnetall.tistory.com/3

React.js로 엑셀 다루기, xlsx

 

 

저번에 React.js로 엑셀파일을 처리하려고 xlsx을 통해 간단한 웹앱을 만들어보았습니다.

하지만 문제가 생겼습니다.

 

 

'xlsx'이라는 라이브러리의 기본버전은 엑셀은 만들고 읽어오고 쓰기도 할 수 있지만 스타일링 옵션은 Proversion을 사야한다는 문제점이 있었습니다. 저는 엑셀의 정렬이나 스타일링도 꽤 중요했기 때문에 이것이 꼭 필요했습니다. 하지만 자주 쓰진 않아서 Proversion까지 살 필요는 없었습니다.

 

https://www.npmjs.com/package/xlsx

xlsx

 

 

SheetJS Pro offers solutions beyond data processing: Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!

그래서 스타일링까지 가능하다고 되어 있는 xlsx-js-style 라이브러리를 사용했습니다. 

https://github.com/gitbrent/xlsx-js-style

GitHub - gitbrent/xlsx-js-style: SheetJS Community Edition + Basic Cell Styles

별은 7900개로 8천개 조금 못 미칩니다. xlsx의 라이브러리에 그냥 fork한 버전이라서 기존 함수 그대로 사용하시면 됩니다. 

// 프로젝트 디렉토리에 터미널로 접속하여 설치해줍니다.
npm install xlsx-js-style

//엑셀시트에 그대로 배열값을 써준다.
const ws = XLSX.utils.aoa_to_sheet([row]);
// book에 만든 sheet를 추가해준다.
XLSX.utils.book_append_sheet(wb, ws, "readme demo");
// 파일을 만들어준다.
XLSX.writeFile(wb, "xlsx-js-style-demo.xlsx");

엑셀의 스타일링 부분에 대한 코딩부분은 셀마다 지정하는 방식이 예제에서 쓰이고 있습니다. 

 

 

let row = [
	{ v: "Courier: 24", t: "s", s: { font: { name: "Courier", sz: 24 } } },
	{ v: "bold & color", t: "s", s: { font: { bold: true, color: { rgb: "FF0000" } } } },
	{ v: "fill: color", t: "s", s: { fill: { fgColor: { rgb: "E9E9E9" } } } },
	{ v: "line\nbreak", t: "s", s: { alignment: { wrapText: true } } },
];

v의 의미는 value이며 셀에 들어가는 값을 뜻합니다. 다른 것은 alignment(정렬), border(테두리), fill(배경색), font(글자스타일링), numFmt(숫자 표기형식) 등이 있습니다.

 

xlsx을 활용해서 만든 엑셀 자동화 프로그램 웹앱

프로그램으로 만든 엑셀파일

 

---

회사에 엑셀을 사용하여 작업하는 분들이 많을 것이라고 예상됩니다. 단순한 작업이라도 웹으로 만들면 PC건 모바일이건 웬만한 작업을 할 수 있습니다. 다음에는 파이어베이스로 호스팅하는 법까지 정리할 예정입니다.