序言 |背景

在一些具体的工作场景中，可能有需要将多个来自多个Excel文件的工作簿中的数据合并到一起，比方说合并来自不同分公司或者不同部门的月度销售报告。为了达成这个目的，您可以使用纯前端电子表格组件，SpreadJS，它能够轻松的在前端浏览器应用的网页上加载和呈现Excel工作簿。通过使用SpreadJS的多个隐藏实例，加载多个Excel文件中的工作簿，将它们合并成一个电子表格。之后，就可以轻松的在一个电子表格中完成数据汇总、统计分析等功能。

以下将展示一些示例代码，演示如何使用SpreadJS合并多个Excel文件，将多个工作簿合并之后的结果在前端浏览器应用中以单个电子表格的形式展示出来。

初始化项目

在项目中加载SpreadJS，您需要添加对相应的主JavaScript库和CSS文件的引用。此外，由于您还需要加载Excel文件，因此还需要添加对ExcelIO JavaScript库的引用。

为了完成这些步骤，您可以按照以下指南：

转至您的HTML文件所在的位置。
使用NPM（Node Package Manager）安装SpreadJS文件。您可以运行命令npm install来安装SpreadJS。
在HTML文件中，添加对SpreadJS主要JavaScript库和CSS文件的引用。您可以使用<script>和<link>标签来引入这些文件，确保文件路径正确无误。
同样，在HTML文件中，添加对ExcelIO JavaScript库的引用。这个库将允许您加载和操作Excel文件。确保您正确引用了ExcelIO库的路径。
现在，您可以使用SpreadJS的API来加载和处理Excel工作簿数据，并将它们呈现在前端浏览器应用的网页上。

通过按照以上步骤操作，您将能够轻松加载SpreadJS并准备处理Excel文件。这样，您就可以合并多个工作簿的数据并将它们以单个电子表格的形式显示在前端浏览器应用中了。

以下是具体的代码片段：

通过NPM安装依赖包：

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>

添加一个 DIV 元素来承载 SpreadJS 实例。

<body>

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

添加一些代码来初始化 SpreadJS 实例、ExcelIO 和一个数组来保存隐藏的工作簿实例，在Excel文件合并之前将使用这些隐藏的工作簿实例来加载所有的单个Excel 文件：

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

当用户点击选择一个文件，之后点击“添加工作簿”按钮时，将创建一个新的隐藏 DIV 元素用来保存将用于临时加载 Excel 文件的 SpreadJS 实例，并将它们添加到隐藏的工作簿列表中，具体代码如下所示：

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 文件加载到隐藏的工作簿实例中：

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

在前端应用中合并 Excel 文件

在 JavaScript 中合并 Excel XLSX 文件

当最终用户选择完需要合并的零散的多个Excel文件，做好准备将所有工作簿进行合并时，可以单击“合并工作簿”按钮，将每个工作簿中的每个工作表复制到页面上可见的 SpreadJS 实例：

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

此处需要注意：如果需要加载的工作簿使用了命名样式（Named Style），则需要确保已经将此样式添加到可见的 SpreadJS实例中，否则它将无法正确显示，因为我们每次操作的时候只是复制了单个工作表。在上面的函数中，可以通过“spread.addNamedStyle()”完成对于Named Style命名样式的添加。

到此，您已经了解如何在前端应用中加载位于多个 Excel 文件中的工作簿并使用 SpreadJS 将它们合并。需要尝试该功能或查看 SpreadJS 的其他惊人功能，可即刻前往葡萄城官网下载试用！

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、数据填报、类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

如下资源列表，可以为您评估产品提供帮助：