SpreadJS에서 여러 Excel 통합 문서를 병합하는 방법

고급기능 SpreadJS에서 여러 Excel 통합 문서를 병합하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-08-23 13:51 조회 924회 댓글 0건

본문

첨부파일

SJS Multiple Workbook Merge.zip (1.4K)

관련링크

SpreadJS는 Excel 통합 문서를 쉽게 로드하여 웹페이지에 렌더링할 수 있습니다. 경우에 따라 월간 보고서처럼 통합 문서를 결합해야 할 수 있습니다.

한 가지 방법은 숨겨진 SpreadJS 인스턴스를 사용하여 통합 문서를 하나로 결합하기 전에 먼저 모두 로드하는 것입니다.

이 블로그를 따라하고 상단의 첨부 파일을 통해 샘플을 다운로드하십시오.

프로젝트 설정

SpreadJS를 로드하려면 기본 JS 라이브러리와 CSS 파일을 추가해야 합니다. Excel 파일도 로드하고 있기 때문에 ExcelIO JS 라이브러리를 추가해야 합니다 HTML 파일 위치로 이동한 후 NPM으로 SpreadJS 파일을 설치하면 됩니다.

npm i @grapecity/spread-sheets @grapecity/spread-excelio

그런 다음 HTML 코드에서 해당 파일을 참조합니다.

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

  <link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
  <script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>
</head>
</html>

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

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

그런 다음 Spread.Sheets 인스턴스를 호스팅할 DIV 요소를 추가합니다.

<body>
<div id="ss" style="width: 800px; height: 700px; border: 1px solid gray"></div>
</body>

결합하기 전에 모든 Excel 파일을 로드하는 데 사용할 숨겨진 Spread 인스턴스를 유지하기 위해 해당 Spread 인스턴스, ExcelIO 및 배열을 초기화하기 위한 코드를 추가해야 할 것입니다.

var hiddenWorkbooks, hiddenSpreadIndex, excelIO, spread;
window.onload = function () {
  hiddenSpreadIndex = -1;
  hiddenWorkbooks = new Array();
  excelIO = new GC.Spread.Excel.IO();
  spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
}

Excel 파일 로드

이 페이지에서는 사용자가 얼마든지 통합 문서를 로드할 수 있도록 코드를 추가하고 버튼을 클릭하여 하나로 결합하여 SpreadJS에 표시합니다.

이렇게 하려면 다음 HTML 코드를 추가하십시오.

<input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" />
<input type="button" id="addWorkbook" value="Add Workbook" onclick="CreateNewSpreadDiv()" />
<div id="workbookListBlock" style="display:none">
  <p>Workbooks to load:</p>
  <ul id="workbookList"></ul>
  <input type="button" id="loadWorkbooks" value="Load Workbooks" onclick="LoadWorkbooks()" />
</div>

사용자는 파일 입력을 클릭하여 파일을 선택한 다음 "통합 문서 추가" 버튼을 클릭합니다.

이렇게 하면 Excel 파일을 임시로 로드하는 데 사용할 SpreadJS 인스턴스를 보관하는 새로운 숨겨진 DIV 요소가 작성되고 숨겨진 통합 문서 목록에 추가됩니다.

function CreateNewSpreadDiv() {
  hiddenSpreadIndex++;
  var newDiv = document.createElement("div");
  newDiv.style.cssText = "display:none; width: 800px; height: 600px; border: 1px solid gray";
  newDiv.id = "hiddenWorkbook" + hiddenSpreadIndex;
  document.body.appendChild(newDiv);
  var hiddenWorkbook = new GC.Spread.Sheets.Workbook(document.getElementById(newDiv.id));
  hiddenWorkbooks.push(hiddenWorkbook);
  AddWorkbookToImportList();
}

그러면 이 함수는 ExcelIO 코드를 사용하여 Excel 파일을 숨겨진 Spread 인스턴스에 로드하는 다른 함수를 호출합니다.

function AddWorkbookToImportList() {
  var excelFile = document.getElementById("fileDemo").files[0];
  excelIO.open(excelFile, function (json) {
      var workbookObj = json;
      hiddenWorkbooks[hiddenSpreadIndex].fromJSON(workbookObj);

      AddWorkbookNameElement(document.getElementById("fileDemo").files[0].name);
      document.getElementById("fileDemo").value = "";

  }, function (e) {
      console.log(e);
  });
}

사용자에게 피드백을 제공하기 위해 "AddWorkbookNameElement" 함수로 표시되는 결합할 파일 목록을 보여줍니다.

function AddWorkbookNameElement(workbookName) {
  if (document.getElementById("workbookListBlock").style.display == "none") {
      document.getElementById("workbookListBlock").style.display = "block";
  }
  var newDiv = document.createElement("LI");
  var textNode = document.createTextNode(workbookName);
  newDiv.appendChild(textNode);
  document.getElementById("workbookList").appendChild(newDiv);
}

사용자가 모든 통합 문서를 하나로 결합할 준비가 되면 "통합 문서 로드" 버튼을 클릭하여 각 통합 문서의 각 시트를 페이지에 표시되는 Spread 인스턴스로 복사할 수 있습니다.

function LoadWorkbooks() {
  for (var w = 0; w < hiddenWorkbooks.length; w++) {
      if (GC.Spread.Sheets.LicenseKey == null) {
          for (var s = 1; s < hiddenWorkbooks[w].getSheetCount(); s++) {
              CopySheet(w, s);
          }
      } else {
          for (var s = 0; s < hiddenWorkbooks[w].getSheetCount(); s++) {
              CopySheet(w, s);
          }
      }
  }
  spread.removeSheet(0);
}

function CopySheet(workbookIndex, sheetIndex) {
  spread.addSheet();
  var sheetJson = JSON.stringify(hiddenWorkbooks[workbookIndex].getSheet(sheetIndex).toJSON());
  spread.suspendPaint();
  hiddenWorkbooks[workbookIndex].getNamedStyles().forEach(function (namedStyle) {
      spread.addNamedStyle(namedStyle);
  });
  spread.getSheet(spread.getSheetCount()-1).fromJSON(JSON.parse(sheetJson));
  spread.resumePaint();
}

참고: 각 통합 문서의 스타일을 표시되는 SpreadJS 인스턴스에 추가해야 합니다. 그렇지 않으면 위의 함수에 "spread.addNamedStyle()" 호출로 표시된 것처럼 올바르게 표시되지 않습니다.

이 코드가 추가되면 이제 여러 Excel 통합 문서를 로드하여 SpreadJS와 하나로 결합할 수 있습니다.

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