React 응용 프로그램에서 URL로부터 Excel XLSX 파일을 가져와 표시하는 방법
페이지 정보
작성자 GrapeCity 작성일 2021-09-27 11:43 조회 2,429회 댓글 0건본문
관련링크
GrapeCity의 React 스프레드시트 API인 SpreadJS는 Excel IO 모듈을 사용하여 복잡한 Excel(.XLSX) 파일을 가져오고 내보냅니다. Excel IO 모듈에는 Excel에 대한 종속성 없이 내장된 가져오기 및 내보내기를 위한 순수 JavaScript 로직이 포함되어 있습니다. 이 기능은 응용 프로그램 플랫폼을 독립형으로 구축해야 할 때 매우 유용합니다. React에서 가 있지만 SpreadJS도 지정된 URL에서 Excel 파일 가져오기를 지원합니다. 아래에서는 지정된 URL에서 Excel 파일을 가져오기 위해 React 앱에서 Excel IO 요소에 SpreadJS API를 활용하는 방법에 대해 살펴볼 것입니다.
1단계: SpreadJS Excel IO를 사용하여 React 프로젝트를 설정합니다.
React 앱에서 SpreadJS 및 Excel IO 모듈 사용에 대한 단계는 문서를 참조하십시오.
이 문서는 아래 나열된 필요한 SpreadJS 라이브러리 스크립트와 CSS 파일을 참조하는 시작합니다.
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 에서 얻을 수 있습니다.
참고: 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; }
그런 다음 를 사용하여 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을 가져옵니다.
마지막 단계로, 및 를 사용하여 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를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.