前言 | 问题背景

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 文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0U6AlMpb-1685089090317)(media/4946fef31b3121def89b28d676508f6d.png)]

当用户准备好最终将所有工作簿合并为一个时，他们可以单击“合并工作簿”按钮，将每个工作簿中的每个工作表复制到页面上可见的 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();

}