JavaScript 로직을 통해, URL에서 XLSX를 가져오는 방법

JavaScript 로직을 통해, URL에서 XLSX를 가져오는 방법 > 온라인 스터디

고급기능 JavaScript 로직을 통해, URL에서 XLSX를 가져오는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-08-23 16:23 조회 1,161회 댓글 0건

본문

관련링크

SpreadJS의 ExcelIO 모듈은 Excel 파일을 가져오고 내보내기 위한 순수 JavaScript 로직를 포함하며 SpreadJS에 내장되어 있습니다.

이 기능은 응용 프로그램 플랫폼을 독립형으로 구축해야 할 때 유용합니다.

이 모듈에는 Windows Server가 필요하지 않으며 JavaScript가 있는 단순 HTML 페이지에서 실행할 수 있습니다. 이 옵션을 사용하여 사용자의 시스템에서 파일을 가져오고 해당 URL을 사용하여 서버에 호스팅된 Excel 파일을 가져올 수 있습니다.

아래에는 만들려는 프로젝트의 호스팅 샘플 버전이 나와 있습니다.

SpreadJS ExcelIO URL 데모 페이지

spread 샘플

프로젝트 설정

HTML 파일을 만들고 평가판 SJS 파일, 특히 CSS 파일, 주 SJS 라이브러리 및 ExcelIO 라이브러리에 대한 참조를 추가하는 것부터 시작합니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>SpreadJS ExcelIO URL</title>

  <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.14.1.1.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.14.1.1.min.js"></script>
  <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.14.1.1.min.js"></script>
</head>
<body>
</body>
</html>

페이지를 배포하려면 라이선스 키도 추가해야 합니다.

<script>
  GC.Spread.Sheets.LicenseKey = "<Your Deployment Key>";
</script>

일부 코드를 추가하여 컴포넌트와 ExcelIO 모듈을 초기화합니다.

<script>
  var workbook, excelIO;
  window.onload = function () {

      workbook = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"));
      excelIo = new GC.Spread.Excel.IO();

  }
</script>

설정을 완료하려면 페이지 본문에 SpreadJS 컴포넌트를 호스팅할 DIV를 추가하십시오.

<body>
  <div id="spreadSheet" style="width: 860px; height: 498px; border: 1px solid gray"></div>
</body>

ExcelIO 코드 추가

다음 단계는 두 가지 HTML 입력 요소, 즉 가져올 URL을 지정하는 요소와 버튼을 클릭하여 파일을 가져오는 요소를 추가하는 것입니다. 이 샘플의 경우 HTML을 호스팅하는 폴더에 파일을 이미 업로드했습니다.

참고: 동일한 폴더에 있지 않으면 CORS 예외가 발생합니다. 이것은 누구도 악의적인 파일을 가져오지 못하도록 하는 보안 조치입니다.

<input id="importUrl" value="http://cdn.grapecity.com/spreadjs/hosted/samples/SpreadJSExcelIOURL/Test.xlsx" />
<input id="btnExcelUpload" type="button" onclick="loadFile()" value="Load Excel File" />

이제 URL에서 Excel 파일을 로드하기 위해 버튼에 코드를 추가합니다. 이 작업을 수행하려면 파일을 로드하기 위해 ExcelIO 논리와 결합된 XMLHttpRequest를 사용하십시오.

function loadFile() {
  var excelUrl = document.getElementById("importUrl").value;

  var oReq = new XMLHttpRequest();
  oReq.open('get', excelUrl, true);
  oReq.responseType = 'blob';
  oReq.onload = function () {
      var blob = oReq.response;
      excelIo.open(blob, function (json) {
          jsonData = json;
          workbook.fromJSON(json);
      }, function (message) {
          console.log(message);
      });
  };
  oReq.send(null);
}

이제 모두 완료되었습니다. 이것이 ExcelIO 모듈을 사용하여 지정된 URL에서 SpreadJS로 Excel 파일을 가져오는 데 필요한 모든 코드입니다.

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