React를 사용하여 Excel XLSX를 가져오고 내보내는 방법

고급기능 React를 사용하여 Excel XLSX를 가져오고 내보내는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-10-12 15:07 조회 3,841회 댓글 0건

본문

관련링크

여러분이 작은 소프트웨어 공급업체에서 근무하는 소프트웨어 엔지니어라고 가정해보겠습니다. 하루는 회사에서 중요 고객으로부터 새로운 웹 응용 프로그램에 대한 제안서를 요청하는 이메일을 받았습니다. 이 고객은 ReactJS로 작성된 응용 프로그램을 요구했고 여기에 Excel 가져오기/내보내기 기능을 갖춘 스프레드시트가 보이는 화면 샘플을 함께 보내왔습니다. 모양과 느낌이 동일하면서 마치 Excel 스프레드시트처럼 동작해야 했습니다. 지금 여러분은 무엇을 해야 할까요?

React와 스프레드시트

이렇게 요청한 고객의 동기를 살펴볼까요? React는 현재 가장 널리 사용되는 프론트엔드 라이브러리/프레임워크입니다. 지난 몇 년 동안 React는 IT 학생부터 대기업까지 많은 곳에서 사용이 증가하고 있습니다. React는 기술, 생산성 제품군, 맞춤 영업 부문 앱에 집중 투자하는 기업에서 사용이 점점 늘어나고 있습니다.

기업 사용자는 특수화된 비즈니스 응용 프로그램과 함께 사용할 뿐만 아니라 스프레드시트, 차트 및 보고 앱 등과 같이 일반적인 용도의 도구와 함께 사용합니다. ReactJS를 채택하는 기업은 대개 직원 또는 고객에게 친숙한 기능을 갖춘 생산성 도구를 제공하는 타사 공급업체를 찾습니다. 그러나 직원이나 고객이 일상 업무에 필요한 사용자 경험을 제공하지 못하는 앱을 사용해야 하는 경우가 종종 있습니다.

스프레드시트 컴포넌트 사용

SpreadJS는 React 개발자에게 그 어디서도 찾기 힘든 스프레드시트 기능을 제공합니다. 따분한 정적인 표를 사용하는 대신 포함된 대화형 스프레드시트로 인해 이점을 얻을 수 있는 영업 부문 앱이 많이 있지만, 개발자가 더 나은 것이 가능하다는 생각을 못 하기 때문에 결국 비즈니스 앱은 지루한 표에서 벗어날 수가 없습니다.

이 튜토리얼에서는 여러분이 이미 ReactJS에 대한 기본 지식을 갖추고 있다고 가정하고 기존 React 앱을 사용하고 스프레드시트를 추가하는 방법을 보여주면서 정적 표 접근 방식을 개선해 보겠습니다. 그런 다음 SpreadJS의 기본 제공 Excel 가져오기/내보내기 기능의 이점을 활용하여 앱을 더욱 개선해 보겠습니다.

450개가 넘는 함수를 갖춘 강력한 계산 엔진

최적화된 이 고속 엔진은 가장 복잡한 공식에 컴퓨팅 성능을 추가하고 다른 스프레드시트 컴포넌트보다 더 많은 기능을 포함하며 사용자 정의 기능을 지원합니다.

JavaScript 스프레드시트에서 Excel 파일 가져오기/내보내기

완전한 Excel 가져오기/내보내기 지원 없이는 어떤 JavaScript 스프레드시트도 완성되지 않습니다. Excel 스프레드시트를 가져올 때 기능이 거의 손실되지 않고 SpreadJS 스프레드시트를 XLSX로 내보낼 수 있습니다.

차트와 스파크라인을 사용하여 데이터 시각화

대화형 차트 및 스파크라인을 사용하여 데이터에 대한 인사이트를 제공합니다. 대부분의 Excel 차트, 상호 작용 및 애니메이션은 대시보드와 분석 스프레드시트를 생동감 넘치게 만듭니다.

세계화 기본 제공

사용 가능한 Culture 중에서 선택하거나 맞춤 Culture를 만들어 날짜 마스크, 언어, 숫자 구분 기호, 통화 등을 조정할 수 있습니다.

데이터 프레젠테이션 컨트롤

표, 필터링, 조건부 서식 및 셰이프를 활용해 확장된 Excel과 같은 환경을 제공할 수 있습니다.

React 앱에 SpreadJS 추가하기

StackBlitz에서 실제 실행 중인 정적 표 앱을 살펴볼 수 있고 여기에서 데모 소스를 찾을 수 있습니다.

SpreadJS가 이미 추가된 완전한 기능을 갖춘 앱이 필요한 경우 이 샘플을 다운로드하세요.

다운로드한 다음 터미널을 열고 레포지토리를 복제한 디렉터리로 이동한 후 다음 코드를 실행합니다.

npm install

이제 실행 중인 업데이트 앱이 보입니다.

정적 코드
정적에서 스프레드시트로
Reactive Binding이 적용된 스프레드시트
Excel 가져오기/내보내기 기능 추가

1단계: 정적 코드

정적 코드

이 응용 프로그램의 프론트 엔드는 ReactJS를 기반으로 하고 JSX 구문, JavaScript와의 결합 및 HTML 코드를 사용하여 만든 컴포넌트로 구조화되어 있습니다. 이 응용 프로그램은 기능 컴포넌트의 구문을 사용하여 만들었습니다. 이러한 접근 방식을 통해 컴포넌트를 더 복잡하고 읽기 어렵게 만들 수 있는 읽기 클래스를 피할 수 있습니다.

대시보드는 JSX 컴포넌트 계층 구조의 맨 위에 있습니다. 더미 JSON 매출 데이터가 있는 파일에서 생성된 HTML 콘텐츠를 렌더링하고 응용 프로그램 상태를 유지합니다.

각 자식 컴포넌트는 콘텐츠 렌더링을 담당합니다. 대시보드만 앱 상태를 보유할 수 있기 때문에 속성을 통해 각 자식 컴포넌트로 데이터를 아래로 전달합니다.

import React, { useState } from 'react';
import { NavBar } from './NavBar'
import { TotalSales } from './TotalSales'
import { SalesByCountry } from './SalesByCountry'
import { SalesByPerson } from './SalesByPerson'
import { SalesTable } from './SalesTable'
import { groupBySum } from "../util/util";
import { recentSales } from "../data/data";
export const Dashboard = () => {
   const sales = recentSales;
   function totalSales() {
     const items = sales;
     const total = items.reduce(
      (acc, sale) => (acc += sale.value),
       0
    );
     return parseInt(total);
  };
   function chartData() {
     const items = sales;
     const groups = groupBySum(items, "country", "value");
     return groups;
  };
   function personSales() {
     const items = sales;
     const groups = groupBySum(items, "soldBy", "value");
     return groups;
  };
   function salesTableData() {
     return sales;
  };
   return (
       <div style={{ backgroundColor: '#ddd' }}>
           <NavBar title="Awesome Dashboard" />
           <div className="container">
               <div className="row">
                   <TotalSales total={totalSales()}/>
                   <SalesByCountry salesData={chartData()}/>
                   <SalesByPerson salesData={personSales()}/>
                   <SalesTable tableData={salesTableData()}/>
               </div>
           </div>
       </div>
  );
}

보이는 것처럼 SalesTable 컴포넌트의 데이터에는 JSON 파일의 데이터에서 직접 얻은 개별 매출이 표시됩니다. 먼저, totalSales, chartData 및 personSales 함수가 원시 매출 데이터를 차지합니다. 이러한 함수는 TotalSales, SalesByCountry 및 SalesByPerson 패널 결과에 대한 계산을 각각 제공합니다.

JSX 구문을 사용하면 문자열을 연결할 필요 없이 코드에서 직접 HTML 콘텐츠를 반환할 수 있습니다. 중괄호로 둘러싸인 HTML 세그먼트에 속성이 삽입되는 방법과 각 컴포넌트가 정적 데이터로 전달되는 방법을 살펴볼 수 있습니다. 페이지 맨 아래 있는 SalesTable 패널은 매출 세부 정보를 정적으로 표시하는 작업을 담당합니다.

다음 단계에서는 대화형 워크시트로 SalesTable 정적 그리드를 교체해야 합니다.

2단계: 정적에서 스프레드시트로

코드 행을 작성하기 전에 먼저 GrapeCity의 Spread.Sheets Wrapper Components for React를 설치해야 합니다. 앱을 중지하고 다음 명령 두 개를 실행합니다.

npm install @grapecity/spread-sheets-react
npm start

SpreadJS를 사용하려면 GrapeCity 컴포넌트의 가져오기를 선언하도록 SalesTable.js 파일을 수정해야 합니다. 이러한 가져오기는 SpreadJS 라이브러리의 SpreadSheets, Worksheet 및 Column 객체에 대한 액세스를 가능하게 합니다.

import React from 'react';
import { TablePanel } from "./TablePanel";
// SpreadJS imports
import '@grapecity/spread-sheets-react';
/* eslint-disable */
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';

게다가 SpreadJS 워크시트는 몇 가지 기본 설정이 없으면 제대로 작동하지 않습니다. 따라서 워크시트 매개 변수를 저장할 config 객체를 만들어 보겠습니다.

export const SalesTable = ({ tableData } ) => {
   const config = {
       sheetName: 'Sales Data',
       hostClass: ' spreadsheet',
       autoGenerateColumns: false,
       width: 200,
       visible: true,
       resizable: true,
       priceFormatter: '$ #.00',
       chartKey: 1
  }

먼저 SalesTable 컴포넌트 내에서 정적 패널을 렌더링하는 JSX 코드를 제거해야 합니다.

return (
  <TablePanel title="Recent Sales">
      <table className="table">
          <thead>
          <tr>
              <th>Client</th>
              <th>Description</th>
              <th>Value</th>
              <th>Quantity</th>
          </tr>
          </thead>
          <tbody>
          {tableData.map((sale) =>
          (<tr key={sale.id}>
              <td>{sale.client}</td>
              <td>{sale.description}</td>
              <td>${sale.value}</td>
              <td>{sale.itemCount}</td>
          </tr>))}
          </tbody>
      </table>
  </TablePanel>
);

이 코드 블록을 제거하면 각 컴포넌트에서 사용하는 일반 UI 래퍼인 TablePanel만 남게 됩니다.

return (
   <TablePanel title="Recent Sales">
   </TablePanel>
);

이 지점에서 이제 TablePanel 내에 SpreadJS SpreadSheets 컴포넌트를 삽입할 수 있습니다. Excel 통합 문서에 워크시트가 한 개 이상 포함되어 있을 수 있는 것처럼 SpreadSheets 컴포넌트에는 워크시트가 하나 이상 포함되어 있을 수 있습니다.

return (
   <TablePanel key={config.chartKey} title="Recent Sales">
       <SpreadSheets hostClass={config.hostClass}>
           <Worksheet name={config.sheetName} dataSource={tableData} autoGenerateColumns={config.autoGenerateColumns}>
               <Column width={50} dataField='id' headerText="ID"></Column>
               <Column width={200} dataField='client' headerText="Client"></Column>
               <Column width={320} dataField='description' headerText="Description"></Column>
               <Column width={100} dataField='value' headerText="Value" formatter={config.priceFormatter} resizable="resizable"></Column>
               <Column width={100} dataField='itemCount' headerText="Quantity"></Column>
               <Column width={100} dataField='soldBy' headerText="Sold By"></Column>
               <Column width={100} dataField='country' headerText="Country"></Column>                  
           </Worksheet>
       </SpreadSheets>
   </TablePanel>
);

마지막으로 아래 코드 행을 App.css 파일에 추가하여 이 컴포넌트가 하단 패널의 너비에 꽉 차고 매출 대시보드 페이지의 적절한 높이에 맞도록 스프레드시트 치수를 수정합니다.

/*SpreadJS Spreadsheet Styling*/
.container.spreadsheet {
   width: 100% !important;
   height: 400px !important;
   border: 1px solid lightgray !important;
   padding-right: 0;
   padding-left: 0;
}

어떤가요! 아래와 같이 멋진 스프레드시트가 탄생했습니다.

스프레드시트

SpreadJS 스프레드시트는 Excel 스프레드시트와 동일한 모양 및 느낌을 줍니다.

워크시트 컴포넌트 내에는 각 열의 특성(예: 너비, 바인딩 필드, 헤더 텍스트)을 정의하는 열 컴포넌트가 있습니다. 또한 매출 금액 열에 통화 서식도 추가했습니다.

이전 통계 표와 마찬가지로 새 SpreadJS 스프레드시트 컴포넌트도 대시보드에서 전달된 속성에서 데이터를 받습니다. 보시다시피 스프레드시트를 사용하면 Excel 스프레드시트에서 하는 것처럼 직접 값을 변경할 수 있습니다. 그러나 React 응용 프로그램에서 기대하는 것처럼 이러한 변경 사항은 다른 컴포넌트에서 자동으로 반영되지 않습니다. 그 이유는 무엇일까요?

대시보드에서 데이터를 수신한 후 SpreadJS 워크시트는 대시보드 컴포넌트에 선언된 매출 데이터가 아니라 사본과 작업하기 시작합니다. 이벤트 및 함수는 앱의 상태를 적절하게 업데이트하기 위해 모든 데이터 수정 사항을 처리해야 합니다.

다음 작업에서는 모든 대시보드 컴포넌트의 SpreadJS에 대해 변경한 사항을 반영하는 응용 프로그램을 만들어야 합니다.

3단계: Reactive Binding이 적용된 스프레드시트

현재 Dashboard.js 파일에 선언된 매출 상수는 응용 프로그램의 상태 유지를 담당합니다.

const sales = recentSales;

보시다시피 이 구성은 정적 데이터를 암시하여 구현하고자 하는 동적 업데이트를 방지합니다. 따라서 코드 행을 후크라고 하는 할당으로 바꿉니다. React에서 후크에는 상태 값 선언과 핸들러 기능을 동시에 제공하는 간소화된 구문이 있습니다.

const[sales, setSales] = new useState(recentSales);

위의 코드행은 구문을 구조 분해하는 JavaScript 배열을 보여줍니다. useState 함수는 상태 데이터를 가지고 있는 매출 상수를 선언하는 데 사용되며, setSales는 단 한 행으로 매출 배열을 변경하는 함수를 참조합니다.

그러나 useState 함수는 아직 응용 프로그램에 존재하지 않습니다. 이 함수는 Dashboard.js 컴포넌트 파일의 시작 부분에서 React 패키지로부터 가져와야 합니다.

import React, { useState } from 'react';

이제 필요한 경우 매출 배열의 상태를 업데이트할 준비가 되었습니다.

우리는 대시보드의 나머지 부분에 대해 워크시트에 대해 수정한 사항을 전파하려고 합니다. 따라서 워크시트 컴포넌트 셀에 대한 변경 사항을 감지하기 위해 이벤트를 구독하고 SalesTable.js 파일에서 해당 이벤트 처리기를 구현해야 합니다.

이 이벤트 처리기를 handleValueChanged라고 불러보겠습니다.

<SpreadSheets hostClass={config.hostClass} valueChanged={handleValueChanged}>

계속해서 같은 이름으로 함수를 구현해야 합니다. 내부에서 변경된 워크시트의 데이터 소스 배열을 가져와 해당 배열을 valueChangeCallback이라는 함수에 전달합니다.

function handleValueChanged(e, obj) {
   valueChangedCallback(obj.sheet.getDataSource());
}
handleValueChanged.bind(this);

그런 다음 valueChangedCallback 함수는 대시보드에서 SalesTable 컴포넌트로 전달됩니다.

<SalesTable tableData={salesTableData()}
   valueChangedCallback={handleValueChanged}/>

이제 이 콜백 함수를 SalesTable 컴포넌트의 매개 변수로 전달해야 합니다.

export const SalesTable = ({ tableData, valueChangedCallback } ) => {

워크시트 내 셀의 변경 사항은 대시보드 컴포넌트에서 handleValueChanged 함수를 실행하는 콜백 함수를 트리거합니다. 아래 handleValueChanged 함수는 대시보드 컴포넌트에서 생성해야 합니다. 이 함수는 컴포넌트의 상태를 업데이트하는 setSales 기능을 호출합니다. 따라서 변경 사항이 응용 프로그램의 다른 컴포넌트로 전파됩니다.

function handleValueChanged(tableData) {
    setSales(tableData.slice(0));
}

매출에 대한 일부 값을 편집하여 대시보드 맨 위에서 매출 수치가 바뀌는 것을 보고 이 작업을 확인해 볼 수 있습니다.

스프레드시트

4단계: Excel 가져오기/내보내기 기능 추가

지금까지 정적 매출 표를 SpreadJS 스프레드시트로 교체하는 방법을 살펴보았습니다. 또한 React의 후크 및 콜백을 통해 응용 프로그램 컴포넌트에 데이터 업데이트를 전파하는 방법을 배웠습니다. 코드를 거의 작성하지 않고 이러한 기능을 구현했습니다. 여러분이 만든 응용 프로그램은 이미 멋지고 미래의 고객에게 멋진 인상을 줄 것이 확실합니다. 하지만 그 전에 조금 더 보기 좋게 만들어 보겠습니다.

여러분은 기업 사용자가 종종 일상 업무에 Excel을 사용한다는 사실을 알고 있습니다. 동일한 사용자가 React 및 SpreadJS 이외에 여러분의 새로운 앱을 사용하기 시작할 것입니다. 하지만 일부 지점에서 Excel과 여러분의 뛰어난 대시보드 간에 통합이 필요하다고 느낄 것입니다.

스프레드시트 데이터를 Excel로 내보내고, Excel의 데이터를 SpreadJS로 가져올 수만 있어도 응용 프로그램이 훨씬 더 강력해질 것입니다. 그렇다면 이러한 기능을 어떻게 구현할 수 있을까요?

앱을 다시 한번 중지하고 file saver 패키지와 함께 GrapeCity의 Spread.Sheets Client-Side Excel IO 패키지를 설치해 보겠습니다.

npm install @grapecity/spread-excelio
npm install file-saver
npm start

응용 프로그램에서 Excel 파일(확장명: .xlsx)로 데이터를 내보내려면 SalesTable 컴포넌트를 수정하여 Excel IO 및 file-saver 컴포넌트에 대한 가져오기를 선언해야 합니다.

import { IO } from "@grapecity/spread-excelio";
import { saveAs } from 'file-saver';

다음으로, SpreadJS 워크시트 데이터를 로컬 파일로 내보내는 버튼을 추가하도록 SalesTable.js 파일의 JSX 코드를 변경합니다. 이 버튼을 클릭하면 exportSheet라는 이벤트 처리기가 트리거됩니다.

    .
    .
    .
    {/* EXPORT TO EXCEL */}
    <div className="dashboardRow">
        <button className="btn btn-primary dashboardButton" 
          onClick={exportSheet}>Export to Excel</button>
    </div>
</TablePanel>

그러면 exportSheet 함수가 워크시트의 데이터를 SalesData.xslx라는 파일에 저장합니다. 이 함수는 스프레드시트 개체의 데이터를 JSON 형식으로 직렬화한 다음 Excel IO 객체를 통해 Excel 형식으로 변환하여 시작합니다.

function exportSheet() {
   const spread = _spread;
   const fileName = "SalesData.xlsx";
   const sheet = spread.getSheet(0);
   const excelIO = new IO();
   const json = JSON.stringify(spread.toJSON({
       includeBindingSource: true,
       columnHeadersAsFrozenRows: true,
  }));
   excelIO.save(json, (blob) => {
       saveAs(blob, fileName);
  }, function (e) {  
       alert(e);  
  });    
}

위 함수가 spread 객체를 요구하는 방식에 유의하십시오. 이 객체는 SalesTable 컴포넌트에서 사용하는 SpreadJS 워크시트와 같은 인스턴스여야 합니다. SpreadSheet 객체를 정의하면 위 목록의 getSheet(0) 호출이 스프레드시트 배열에서 첫 번째 워크시트를 검색합니다.

const sheet = spread.getSheet(0);

하지만 스프레드시트의 인스턴스를 어떻게 하면 프로그래밍 방식으로 가져올 수 있을까요?

스프레드시트 객체가 초기화되면 SpreadJS 라이브러리는 workbookInitialized라는 이벤트를 트리거합니다. 이 이벤트를 처리하고 인스턴스를 SalesTable 컴포넌트의 상태로 저장해야 합니다. 먼저, useState 후크를 사용하여 스프레드시트 인스턴스에 대한 상태 const를 선언해 보겠습니다.

const [_spread, setSpread] = useState({});

SalesTable.js 컴포넌트 파일의 시작 부분에서 React 선언으로 useState 함수를 가져와야 합니다.

import React, { useState } from 'react';

이제 workbookInit 이벤트를 처리하도록 함수를 선언하고...

function workbookInit(spread) {
   setSpread(spread)
}

… 그런 다음 방금 만든 함수로 workbookInit 이벤트를 바인딩해야 합니다.

<SpreadSheets hostClass={config.hostClass} workbookInitialized={workbookInit} valueChanged={handleValueChanged}>

이제 Excel로 내보내기 버튼의 모양은 다음과 같습니다.

Excel로 내보내기

이제 Excel 데이터 가져오기를 구현하는 방법을 보여 드리겠습니다. 이 프로세스는 내보내기의 역순으로 진행되므로 XLSX 파일로 시작해 보겠습니다.

이 기능의 액세스 지점은 SalesTable 컴포넌트의 JSX 코드 끝에 추가해야 하는 또 다른 버튼입니다. 여기서는 파일을 선택하는 버튼을 생성하는 "파일" 유형의 입력 요소인 다른 버튼 유형을 사용합니다. 파일이 선택되면 onChange 이벤트가 fileChange 이벤트 처리기를 실행합니다.

<div className="dashboardRow">
    {/* EXPORT TO EXCEL */}
    <button className="btn btn-primary dashboardButton" 
      onClick={exportSheet}>Export to Excel</button>
    {/* IMPORT FROM EXCEL */}
    <div>
        <b>Import Excel File:</b>
        <div>
            <input type="file" className="fileSelect" 
              onChange={(e) => fileChange(e)} />
        </div>
    </div>
</div>

그러면 fileChange 함수가 Excel IO 개체를 사용하여 이 파일을 시트 객체로 가져옵니다. 이 함수의 끝부분에서 fileImportedCallback 이벤트가 트리거되어 데이터를 대시보드 컴포넌트로 가져옵니다.

function fileChange(e) {
    if (_spread) {
        const fileDom = e.target || e.srcElement;
        const excelIO = new IO();
        const spread = _spread;
        const deserializationOptions = {
            frozenRowsAsColumnHeaders: true
        };
        excelIO.open(fileDom.files[0], (data) => {
            const newSalesData = extractSheetData(data);
            fileImportedCallback(newSalesData);
        });
    }
}

하지만 이 콜백은 SalesTable 컴포넌트의 매개 변수로 선언되어야 합니다.

export const SalesTable = ({ tableData, valueChangedCallback,
   fileImportedCallback } ) => {

또한 util.js 파일에서 가져온 extractSheetData 함수를 SalesTable 컴포넌트에 제공해야 합니다.

import { extractSheetData } from "../util/util.js";

대시보드 컴포넌트에서 저장된 파일에 대한 이벤트 처리기를 구현해야 합니다. 이 함수가 하는 유일한 작업은 SpreadJS 워크시트에서 가져온 데이터로 대시보드의 상태를 업데이트하는 일입니다.

function handleFileImported(newSales) {
  setSales(newSales.slice(0));
}

<SalesTable tableData={salesTableData()}
  valueChangedCallback={handleValueChanged}
  fileImportedCallback={handleFileImported}/>

Excel 파일 가져오기