本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
前言|问题背景
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