本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
前言 | 问题背景
SpreadJS 是纯前端的电子表格控件，能够轻松加载 Excel 工作簿中的数据并将它们出现在前端浏览器利用的网页上。
在某些状况下，您可能须要将来自多个工作簿的数据（例如，来自不同部门的月度销售报告）合并到一个工作簿中，实现此目标的一种办法是应用多个暗藏的 SpreadJS 实例来加载所有工作簿，而后将它们合并到一个电子表格中。
此文将向您展现如何合并多个 Excel 工作簿并将它们作为单个电子表格显示在您的前端浏览器利用中。
设置我的项目
要加载 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\>紧接着咱们将增加一个 DIV 元素来承载 SpreadJS 实例。
\<body\>
\<div id="ss" style="width: 800px; height: 700px; border: 1px solid gray"\>\</div\>
\</body\>咱们要增加一些代码来初始化 Spread 实例、ExcelIO 和一个数组来保留暗藏的 Spread 实例，咱们将在合并之前应用它来加载所有 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 文件加载到暗藏的 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);
}在前端利用中合并 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();} 须要留神的一件事：如果您的工作簿正在应用命名款式，则须要将此款式增加到可见的 SpreadJS 实例中，否则它将无奈正确显示，因为咱们正在复制单个工作表。这显示在下面的函数中，能够增加到“spread.addNamedStyle()”。
增加该代码后，您当初能够加载多个 Excel 工作簿并应用 SpreadJS 将它们合并为一个。想要尝试该性能或查看 SpreadJS 的其余惊人性能，可返回葡萄城官网立刻下载试用版！
\>\>\>\>\>\> 扩大浏览:
盘点 Excel 中的那些乏味的“bug”
SpreadJS：一款类 Excel 开发工具，性能涵盖 Excel 的 95% 以上
SpreadJS 在服务器端导入导出 Excel