React(리액트)를 기반으로 Excel(엑셀) 파일 읽어오기 기능을 구현하면, 프론트앤드 기술의 특성상 로컬PC에 있는 Excel 파일만 읽어올 수 있어 제약사항이 많습니다.

이에 이번 포스팅에서는 로컬 PC가 아닌 파일 서버와 같이 URL를 통해 접근할 수 있는 다른 위치에 있는 Excel(엑셀) 파일을 React 코드를 사용해서 읽어오는 방법에 대해서 설명합니다.

서버측/백엔드 기술없이 React 기술로만 다른 서버에 있는 Excel 파일을 URL를 통해서 수식부터 차트, 셀 서식, 이미지 등을 그대로 읽고 수정 및 저장할 수 있는 라이브러리인 SpreadJS를 사용하여 엑셀 파일을 자유롭게 다루는 방법을 정리해 봅니다.

---

샘플 프로젝트 실행

아래 링크를 통해서 React(리액트)로 개발한 URL을 통해서 Excel을 읽어 실제 샘플과 코드를 볼 수 있습니다.

- React에서 URL을 통해 Excel(엑셀) 파일 읽기 (바로가기)

---

1. React 프로젝트 만들기

먼저 빈 React 프로젝트를 만들어 봅니다!!

npm init react-app sjs-react-app 

//(옵션) yarn을 사용한다면 
yarn create react-app sjs-react-app

//이후 폴더 이동
cd sjs-react-app

2. SpreadJS npm 패키지 설치

필요한 SpreadJS의 모듈을 모두 설치합니다.

npm을 사용한다면,

npm install @mescius/spread-sheets-react @mescius/spread-sheets @mescius/spread-sheets-charts  @mescius/spread-sheets-io @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-resources-ko @mescius/spread-sheets-shapes @mescius/spread-sheets-slicers

(옵션) yarn을 사용한다면,

yarn add @mescius/spread-sheets-react @mescius/spread-sheets @mescius/spread-sheets-charts  @mescius/spread-sheets-io @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-resources-ko @mescius/spread-sheets-shapes @mescius/spread-sheets-slicers

3. 프로젝트에 SpreadJS React 컴포넌트 추가/초기화

src 폴더 내의 App.js 파일을 연 후 , App.js 내부의 내용을 아래 코드로 대체합니다.

import './App.css';
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import * as GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
import '@mescius/spread-sheets-slicers';
import '@mescius/spread-sheets-pivot-addon';
import '@mescius/spread-sheets-io';
import '@mescius/spread-sheets-resources-ko';
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';

GC.Spread.Common.CultureManager.culture('ko-kr');

function App() {
  let hostStyle = {
    width: '100%',
    height: '600px'
  }

  // SpreadJS 초기화
  let initSpread = function (spread) {
    let sheet = spread.getActiveSheet();
    sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value('Hello SpreadJS!');
  }

  return (
    <div>
      <SpreadSheets workbookInitialized={spread => initSpread(spread)}  hostStyle={hostStyle}>
        <Worksheet> </Worksheet>
      </SpreadSheets>
    </div>
  );
}

export default App;

4. URL을 통해 Excel 파일을 읽기 위한, HTML 요소 만들기

URL을 입력할 input 요소와 불러오기 동작을 할 버튼을 추가합니다.

  return (
    <div>
      
      <!--URL 입력을 위한 Input Text-->
      <input
        type="text"
        id="importURL"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
      />
      
      <!--Excel 불러오기 버튼-->
      <button onClick={importExcelfromURL}>URL을 통해 엑셀 불러오기</button>
      
      <!--SpreadJS Excel 시트 영역 - Excel 뷰어-->
      <SpreadSheets
        workbookInitialized={(spread) => initSpread(spread)}
        hostStyle={hostStyle}
      >
        <Worksheet></Worksheet>
      </SpreadSheets>
    </div>
  );

이제 화면 구성이 끝났습니다!!!
위의 코드를 실행하면 아래 이미지와 같은 화면을 볼 수 있습니다.

이제 URL을 통해 엑셀 불러오기 동작을 구현해 보도록 하겠습니다.

5. URL을 통해 SpreadJS로 Excel 파일 가져오기

  function App() {
    
    const [url, setUrl] = React.useState(
      'https://assets.codepen.io/975719/export.xlsx'
    );
    const [spread, setSpread] = React.useState(null);
  
   //...(이하생략)
  
    // 
    const importExcelfromURL = () => {
      var url = document.getElementById('importURL').value;
      fetch(url)
        .then((res) => res.blob()) // returns URL data a blob
        .then((blob) => {
          console.log(blob);
          spread.suspendPaint();
          spread.import(
            blob,
            function () {
              // success callback to do something
            },
            function (e) {
              console.log(e); // error callback
            },
            {
              // 가져오기옵션 도움말: https://demo.mescius.co.kr/spreadjs/api/modules/GC.Spread.Sheets#importoptions
              // fileType: GC.Spread.Sheets.FileType.excel
            }
          );
          spread.resumePaint();
        });
    };
  
  //...(이하생략)
  
  }

전체 코드

아래의 전체 React 코드를 확인해보세요!!

import './App.css';
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import * as GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
import '@mescius/spread-sheets-slicers';
import '@mescius/spread-sheets-pivot-addon';
import '@mescius/spread-sheets-io';
import '@mescius/spread-sheets-resources-ko';
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';

GC.Spread.Common.CultureManager.culture('ko-kr');

function App() {
  const [url, setUrl] = React.useState(
    'https://assets.codepen.io/975719/export.xlsx'
  );
  const [spread, setSpread] = React.useState(null);

  let hostStyle = {
    width: '100%',
    height: '380px',
  };

  let initSpread = function (spread) {
    setSpread(spread);       
  };

  const importExcelfromURL = () => {
    var url = document.getElementById('importURL').value;
    fetch(url)
      .then((res) => res.blob()) // returns URL data a blob
      .then((blob) => {
        console.log(blob);
        spread.suspendPaint();
        spread.import(
          blob,
          function () {
            // success callback to do something
          },
          function (e) {
            console.log(e); // error callback
          },
          {
            // 가져오기옵션 도움말: https://demo.mescius.co.kr/spreadjs/api/modules/GC.Spread.Sheets#importoptions
              // fileType: GC.Spread.Sheets.FileType.excel
          }
        );
        spread.resumePaint();
      });
  };

  return (
    <div>
      <input
        type="text"
        id="importURL"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
      />
      <button onClick={importExcelfromURL}>URL을 통해 엑셀 불러오기</button>
      <SpreadSheets
        workbookInitialized={(spread) => initSpread(spread)}
        hostStyle={hostStyle}
      >
        <Worksheet></Worksheet>
      </SpreadSheets>
    </div>
  );
}

export default App;

SpreadJS를 통해, React 웹 애플리케이션에서 로컬 PC가 아닌 외부 서버에 있는 Excel 파일을 URL을 통해서 읽어오는 Excel 뷰어를 만들어 보았습니다!

---

지금 SpreadJS를 무료로 사용해보세요!!

더욱 상세한 기능이 포함되어 있는 Excel 가져오기/내보내기 데모를 소스 코드와 함께 확인해 볼 수 있어요!!!
PureJS, React, Vue, Angular 코드도 확인할 수 있어요 !!

• SpreadJS 홈페이지
• SpreadJS React 시작하기
• SpreadJS Excel 가져오기/내보내기