[JS][Excel] 엑셀 스타일 기능 (feat. xlsx-js-style, SheetJS)

이전에 SheetJS 기반으로 엑셀 기본 기능 개발에 관한 글을 작성하였습니다. 그런데 개발 후, 엑셀에 스타일을 포함해달라는 추가 요구사항이 있었고, 저와 같은 분들이 계실 것 같아서 관련 글을 작성해봅니다.

이전 글의 소스 및 SheetJS 를 기반으로 작성하므로 이전 글을 보고 오시면 좋습니다. :)

 

이전 엑셀 기능 관련 글 https://ryusae.tistory.com/36

 

 

SheetJS 에서 엑셀 스타일 변경은 원래 Pro 버전에서만 제공되는 기능입니다. 다만, 다른 라이브러리를 추가하여 기능 보강을 할 수 있었습니다. 그 라이브러리들 중 하나가 xlsx-js-style 입니다.

 

xlsx-js-style Read Me :https://github.com/gitbrent/xlsx-js-style/blob/master/README.md 

소스 위치 : https://github.com/gitbrent/xlsx-js-style/blob/master/dist/xlsx.bundle.js 

 

1. 엑셀 스타일 변경 : xlsx-js-style

 

HtmlPage1.html

<script type="text/javascript" src="dist/xlsx.bundle.js"></script>

 

해당 라이브러리를 추가해준 후에, Sheet 내의 데이터를 읽어 온 newWorksheet 객체 내에 스타일 (s) 프로퍼티를 추가해주면 됩니다.

엑셀 데이터를 읽어온 newWorksheet 객체

 

t = type (s : string, n : number )
v = value
s = style

 

 

 

그러면 신규 스타일 함수 setExcelStyles() 를 추가해보겠습니다. 간단하게 헤더에 bold 처리하고 빨간색으로 바꾸는 예제 소스입니다.

 

펑션 내에는 fill: {bgColor: { rgb: "b2b2b2" }}, sz : 20 등 필요한 style을 추가할 수 있고, cell.c 로 접근하여 컬럼 별로 처리를 하거나, 직접 i 값을 이용하여 필요한 필드에 대해서 처리가 가능합니다.

setExcelStyles: function (ws) {
	for (i in ws) {
		let cell = XLSX.utils.decode_cell(i); // 셀의 정보를 읽는다
		if (cell.r == 0) {	// first row
			ws[i].s = ws[i].s = { font: { bold: true, color: { rgb: "FF0000" } } }; // 첫번째 로우(header)에 bold 처리를 한다
		}
	}
}

 

 

기존 소스에서의 실행 위치는 시트 데이터를 로드한 step 2번 이후가 좋겠습니다.

	function exportExcel(id) {
		// step 1. workbook 생성
		var wb = XLSX.utils.book_new();
		// step 2. 시트 만들기
		var newWorksheet = excelHandler.getWorksheet();

		// stype 2-2. 스타일 추가하기
		excelHandler.setExcelStyles(newWorksheet);

		// step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.
		XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());
		// step 4. 엑셀 파일 만들기
		var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
		// step 5. 엑셀 파일 내보내기
		saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), excelHandler.getExcelFileName());
	}

 

 

이제 [EXPORT] 버튼을 클릭하여 엑셀을 내려받아보면, 헤더에 스타일이 적용된 모습을 볼 수 있습니다.

 

 

 

2. Excel Import 시, 데이터 타입 예외 구문 추가

덧붙여, 지난 번에 입사일 데이터가 숫자로 변경되어서 한번 Convert 해주는 작업을 거쳤었는데요.

그럴 필요 없이 데이터를 읽어 올 때, 예외 옵션 값을 주어서 형 변환을 하지 않는 방향으로도 수정이 가능하였습니다.

 

데이터가 자동 변환이 된 이유는, 날짜 필드의 type 이 자동으로 number 로 바뀌면서 d/m/yy 포맷이 적용되고 있었습니다.

 

 

=> table_to_sheet() 펑션을 실행할 때 {dateNF:'mm/dd/yyyy;',cellDates:true, raw: true} 파라미터를 추가해줍니다.

		getWorksheet: function () {
			return XLSX.utils.table_to_sheet(this.getExcelData(),{dateNF:'mm/dd/yyyy;',cellDates:true, raw: true});
		},

 

 

기존에 만들었던 exToDateString() 는 제외합시다.

AS-IS : exToDateString(d.입사일) 
TO-BE : d.입사일

 

 

그러면 날짜 변환 없이도 정상적으로 일자 데이터가 추가된 것을 보실 수 있습니다.

 

 

 

 

참고 :

https://github.com/SheetJS/sheetjs/issues/847

https://stackoverflow.com/questions/50147526/sheetjs-xlsx-cell-styling