데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

어떤 라이브러리를 쓰는 것이 좋을까?

---

쉬운길로 가려다가, 결국 다 써보게 되었다..

 

---

링크

① 데스크탑 앱 만들기 #1 - Vue CLI + Electron

② 데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

③ 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

④ 데스크탑 앱 만들기 #4 - ExcelJS, ipcRenderer, ipcMain, removeListener

 

 

 6개의 엑셀 파일에 데이터를 매일 집어넣는 게 귀찮아서 시작한 데스크톱 앱 만들기 2탄입니다. 이번 글에서는 엑셀 파일을 일렉트론 background.js(웹앱으로 치면 backend 또는 server)로 불러오는 작업을 실행해볼 겁니다. 방대한 JAVASCRIPT 생태계에 분명 이와 관련된 라이브러리가 있을 거라고 생각했습니다. 그리고 구글링을 시작했죠. 그리고 처음 발견한 라이브러리가 SheetJS입니다.

 

 결과적으로 저는  ExcelJS 라이브러리를 사용하고 있습니다. 이유는 스타일 오류 때문입니다.

 

 SheetJS는 엑셀을 JSON 형식으로 뽑아서 읽고 쓸 수 있다는 점은 정말 편리합니다. 보기에 익숙하니 그 장점이 컸었죠. 엑셀 파일을 읽어서 JSON 형식으로 읽어오는 데는 대부분 문제가 없었습니다. 문제는 쓰기에서 발생했죠.

 

The black cell in excel

  위처럼 데이터가 들어간 부분의 대부분이 검은색이 되어버렸습니다. 고칠 방법을 찾아 이리저리 헤맸더랬죠. SheetJS에서 문제가 발생했으니 혹시 다른 라이브러리를 적용하면 어떨까 해서 js-xlsx도 써보았습니다. 하지만 결과는 같았죠. 더 찾아보니 xlsx-style 라이브러리도 있다길래 희망을 가지고 추가로 사용해보았습니다. 역시 실패.

 

 그리고 혹시나 SheetJS의 유료버전은 어떤가 싶어서 가격 정책을 알기 위해 구글링 해보았으나 찾는데 실패. 그래서 직접 이메일을 보내보았습니다. 답변은 

가격은 "누가"(회사 내부, 다른 회사의 계약 작업, 고객 대면, 공개), "무엇"(아래에 설명 된 기능 세트) 및 "어디"(서버 측 또는 브라우저 또는 인앱)에 따라 다릅니다.

라고 왔습니다.

 

 혼자 쓸꺼니까 얼마냐고 물어보려다가 왠지 비쌀 거 같기도 하고 굳이 돈을 내면서까지 만들어야 하나 생각도 들고 귀찮기도 해서 참았습니다. 그리고 첨부된 PDF 파일에 프로 버전에 대한 설명이 있었는데요.

 

 네, 돈주면 cell backgrounds와 borders를 customize 할 수 있다고 합니다. 회사에서 프로젝트를 받아서 만든다면 SheetJS 프로 버전도 써보고 싶다는 생각이 들었습니다. JSON은 편리하거든요.

 

 어쨋든 실패하고 다시 찾은 라이브러리가 ExcelJS입니다. 깃헙에 들어가서 쭉 읽어보니 코딩 초보인 저에게는 SheetJS보다 확실히 어려운 코드들이었습니다. 그래도 어떻게 하겠나요. 이 또한 넘어야 할 산인 것을.

 

 먼저 설치!

npm install exceljs
// or
yarn add exceljs

 

 background.js에 임포트 해줍니다. 파일을 로드할 거니까 경로 관리를 쉽게 하기 위해 path도 임포트 합니다.

import path from 'path'
import ExcelJS from 'exceljs'

 

 그럼 하단에 async function을 하나 만들어줍니다. 파일을 읽는 동안 기다려주지 않으면 오류를 내뿜거든요.

const filePath = '/Users/username/filepath/filename.xlsx'

async loadExcelFile(filePath) {
	const workbook = new ExcelJS.Workbook()
	await workbook.xlsx.readFile(filePath)
	const worksheet = workbook.worksheets[0]

	console.log(worksheet)
}

loadExcelFile(filePath)

 

 아래처럼 Worksheet 객체가 소환되면 성공!

 이제 객체에서 행(row)과 셀(cell)을 순회하면서 값을 받아오겠습니다.

const filePath = '/Users/username/filepath/filename.xlsx'

async loadExcelFile(filePath) {
	const sheetData = [] 

	const workbook = new ExcelJS.Workbook()
	await workbook.xlsx.readFile(filePath)
	const worksheet = workbook.worksheets[0] // 첫 번째 sheet 선택
    
	const options = { includeEmpty: true }

	await worksheet.eachRow(options, (row, rowNum) => {
		sheetData[rowNum] = []
		row.eachCell(options, (cell, cellNum) => {
			sheetData[rowNum][cellNum] = { value:cell.value, style:cell.style }
		})
	})

	console.log(sheetData)
}

loadExcelFile(filePath)

 

 ExcelJS 라이브러리에서는 eachRow를 이용해서 각 행을 순회하면서 값을 가져오고, 각 행을 돌 때 다시 row객체에서 eachCell을 이용해서 각 cell의 내용을 가져옵니다. 행 또는 셀의 내용을 가져올 때 빈 셀의 값과 스타일도 가져오고 싶다면 options에 includeEmpty를 true로 설정하면 됩니다.

 

 이제 콘솔 창을 보면 잘 다듬어진 결과값이 보입니다. 깔끔하지요?

 

 다음 포스팅에서는 이 결과값을 가지고 FrontEnd와 BackEnd 사이에서 통신하는 방법인 ipcMain, ipcRenderer에 관해 다뤄보겠습니다. 그럼 안녕히!

 

---

다음 : 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

오늘도 하나 해냈다..