React.js로 엑셀 다루기, xlsx

웹은 다른 것보다도 디버깅하기 쉽고 툴이 잘되어 있기 때문에 시작하기 쉽습니다. 

React로 엑셀을 다룰 수 없나 인터넷에 살펴보았습니다. 파이썬의 경우 윈도우즈 프로그래밍으로 할 수 있는 QTPY라는 라이브러리가 있었고 React도 엑셀을 다룰 수 있는 xlsx 라는 라이브러리가 있었습니다.  

 

반응형

 

 

설치법과 메뉴얼 영문 사이트, xlsx, sheetjs

https://docs.sheetjs.com/docs/

Overview | SheetJS Community Edition

 

웹의 특성상 PC, Mobile, Tablet 등 많은 기기에서 바로 접근할 수 있어 원툴로 활용도가 좋은 편입니다. 

게다가 이 라이브러리를 쓰면서 쉽게 버튼을 만들고 엑셀이 만들어지는 것을 보고 프로그래밍하는 맛도 있었습니다. 

 

우선 설치하려면 터미널 -> 프로젝트가 위치한 디렉토리 -> 

npm i --save https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz

yarn add https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz

2개 중 하나로 설치해주시면 됩니다. 

import * as XLSX from 'xlsx';

사용하고 싶은 파일에 import 해줍니다.

위의 사이트의 경우 간단한 예제를 살펴보면

 

 

JSON 배열을 엑셀 파일로 생성하는 예제 중 일부

  const worksheet = XLSX.utils.json_to_sheet(rows);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
  
  /* create an XLSX file and try to save to Presidents.xlsx */
  XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true });

 

XLSX.utils.json_to_sheet 에서 json 파일을 엑셀의 워크시트로 만들고 엑셀 워크북으로 만든다음 그것을 엑셀로 생성하는 과정을 나타내줍니다.  버튼을 클릭하면 Presidents.xlsx라는 엑셀 파일이 생성됩니다. 

 

엑셀 파일을 읽어들이는 예제 중 일부

import * as fs from "fs";
import { readFile, set_fs } from "xlsx/xlsx.mjs";
set_fs(fs);

const workbook = readFile("test.xlsx");

 

---

React.js를 이용해서 엑셀을 제어하는 법도 있다는 것에 흥미로웠고 이것의 쓰임에 대해서 간략하게 알아봤습니다. 다음에는 제가 만들고자 하는 프로그램에 이 라이브러리를 활용하면서 배우는 점에 대해서 포스팅해보겠습니다.