JavaScript 응용 프로그램에서 Excel XLSX 통합 문서를 병합하는 방법

고급기능 JavaScript 응용 프로그램에서 Excel XLSX 통합 문서를 병합하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-05-11 10:14 조회 338회 댓글 0건

본문

관련링크

GrapeCity의 JavaScript 스프레드시트인 SpreadJS를 통해 Excel 통합 문서를 쉽게 로드하고 JavaScript 응용 프로그램의 웹페이지에 렌더링할 수 있습니다.

경우에 따라 여러 통합 문서의 데이터를 결합해야 할 수도 있습니다.(예: 다른 부서의 월별 판매 보고서를 단일 통합 문서로 결합) 이 작업을 수행하는 한 가지 방법은 숨겨진 여러 SpreadJS 인스턴스를 사용하여 통합 문서를 로드한 후 하나의 스프레드시트로 병합하는 것입니다.

이 블로그에서는 여러 Excel 통합 문서를 병합하여 JavaScript 응용 프로그램에서 단일 스프레드시트로 표시하는 방법을 보여 줄 것입니다.

프로젝트 설정

SpreadJS를 로드하려면 기본 JavaScript 라이브러리와 CSS 파일을 추가해야 합니다.

Excel 파일도 로드하고 있으므로 ExcelIO JavaScript 라이브러리를 추가해야 합니다 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>

페이지를 로컬 호스트가 아닌 다른 항목에 배포 중인 경우에도 라이선스 키를 추가해야 합니다.

임의 라이선스 키를 요청하려면 sales-kor@contact.grapecity.com으로 연락하십시오.

<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"));
}

JavaScript에서 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 merge:</p>
    <ul id="workbookList"></ul>
    <input type="button" id="mergeWorkbooks" value="Merge Workbooks" onclick="MergeWorkbooks()" />
</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);
}

JavaScript에서 Excel 파일 병합

JavaScript에서 Excel XLSX 파일 병합

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

function MergeWorkbooks() {
    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를 다운로드하여 직접 테스트해 보세요!