React 응용 프로그램에서 URL로부터 Excel XLSX 파일을 가져와 표시하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-09-27 11:43 조회 2,410회 댓글 0건

본문

관련링크

GrapeCity의 React 스프레드시트 API인 SpreadJS는 Excel IO 모듈을 사용하여 복잡한 Excel(.XLSX) 파일을 가져오고 내보냅니다. Excel IO 모듈에는 Excel에 대한 종속성 없이 내장된 가져오기 및 내보내기를 위한 순수 JavaScript 로직이 포함되어 있습니다. 이 기능은 응용 프로그램 플랫폼을 독립형으로 구축해야 할 때 매우 유용합니다. React에서 Excel 파일을 사용자 시스템에서 가져오는 방법을 보여 주는 라이브 데모가 있지만 SpreadJS도 지정된 URL에서 Excel 파일 가져오기를 지원합니다. 아래에서는 지정된 URL에서 Excel 파일을 가져오기 위해 React 앱에서 Excel IO 요소에 SpreadJS API를 활용하는 방법에 대해 살펴볼 것입니다.

1단계: SpreadJS Excel IO를 사용하여 React 프로젝트를 설정합니다.

React 앱에서 SpreadJS 및 Excel IO 모듈 사용에 대한 단계는 문서를 참조하십시오.

이 문서는 아래 나열된 필요한 SpreadJS 라이브러리 스크립트와 CSS 파일을 참조하는 React 프로젝트를 만드는 것으로 시작합니다.

spread.sheets.all.x.x.x.min.js
spread.excelio.x.x.x.min.js – Excel 파일을 가져오고 내보내려면 포함해야 합니다.
spread.sheets.charts.x.x.x.min.js – SpreadJS에서 차트를 보려면 포함해야 합니다.
spread.sheets.shapes.x.x.x.min.js – SpreadJS에서 도형을 보려면 포함해야 합니다.
spread.sheets.excel2013white.css

이러한 파일은 SpreadJS 릴리스를 다운로드하거나 NPM에서 얻을 수 있습니다.

참고: SpreadJS는 라이선스 키 없이도 로컬에서는 작동하지만 페이지를 배포하는 경우 통합 문서를 만들기 전에 SpreadJS 및 Excel IO 배포 라이선스 키를 설정해야 합니다.

<script>
var licenseKey = "<add your SpreadJS distribution key here. Contact us.sales@grapecity to request a temp key>";
GC.Spread.Sheets.LicenseKey = licenseKey;
excelIO.LicenseKey = licenseKey;
</script>

2단계: URL 반환값을 blob으로 가져옵니다.

다음으로, 페이지 본문에 다음 HTML 입력 요소 2개를 추가합니다.

입력 유형, URL을 지정하는 데 사용됩니다. 예를 들어, 이 Excel 파일을 사용합니다.
입력 버튼 유형, 클릭 시 URL에서 파일을 가져오는 데 사용합니다.

render() {
      return <div class="sample-tutorial">
          <div class="sample-spreadsheets">
              <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
                  <Worksheet>
                  </Worksheet>
              </SpreadSheets>
          </div>
          <div className="options-container">
              <input id="importURL" value="https://cdn.grapecity.com/support/spread/Kevin%20Ashley/export.xlsx" />
              <input type="button" className="button" id="loadFromURL" defaultValue="Import from URL" onClick={e=>this.loadFromURL(e)} />
          </div>
      </div>;
  }

새 함수 loadFromURL을 만들고 입력값에서 URL을 가져옵니다.

loadFromURL(e){
      let spread = this.spread;
      let excelIo = new IO();
      var url = document.getElementById("importURL").value;
}

그런 다음 Fetch API를 사용하여 URL의 데이터를 blob으로 반환하도록 가져오기 요청을 설정합니다.

loadFromURL(e){
      let spread = this.spread;
      let excelIo = new IO();
      var url = document.getElementById("importURL").value;

      fetch(url)
        .then((res) => res.blob()) // returns URL's Excel file data as a blob
        });
  }

3단계: URL에서 SpreadJS로 blob을 가져옵니다.

마지막 단계로, Excel IO의 open 메서드 및 SpreadJS의 fromJSON 메서드를 사용하여 SpreadJS 인스턴스로 blob을 가져옵니다.

loadFromURL(e){
      let spread = this.spread;
      let excelIo = new IO();

      var url = document.getElementById("importURL").value;
      fetch(url)
        .then((res) => res.blob()) // returns URL's Excel file data as a blob
        .then((blob) => {            
          excelIo.open( // Use the Excel IO open method to import blob to SpreadJS
            blob,
            (json) => {
              spread.fromJSON(json);
            },
            (message) => {
              console.log(message);
            }
          );
        });
      }

이와 같이 Excel IO 모듈을 사용하여 지정된 URL에서 SpreadJS JavaScript 응용 프로그램으로 Excel 파일을 가져올 수 있습니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!