前言|问题背景
SpreadJS是纯前端的电子表格控件，可以轻松加载 Excel 工作簿中的数据并将它们呈现在前端浏览器应用的网页上。
SpreadJS 实例来加载所有工作簿，然后将它们合并到一个电子表格中。
此文将向您展示如何合并多个 Excel 工作簿并将它们作为单个电子表格显示在您的前端浏览器应用中。
设置项目
要加载 SpreadJS，我们需要添加主要的 JavaScript 库和 CSS 文件。由于还要加载 Excel 文件，因此我们需要添加 ExcelIO JavaScript 库。这可以通过导航到 HTML 文件的位置并使用 NPM 安装 SpreadJS 文件来完成：
npm i @grapecity/spread-sheets @grapecity/spread-excelio
然后在 HTML 代码中引用这些文件：
Multiple Sheet Merging
紧接着我们将添加一个 DIV 元素来承载 SpreadJS 实例。
我们要添加一些代码来初始化 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 代码：
Workbooks to merge:
用户点击文件输入选择一个文件，然后点击“添加工作簿”按钮。这将创建一个新的隐藏 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
需要注意的一件事：如果您的工作簿正在使用命名样式，则需要将此样式添加到可见的 SpreadJS实例中，否则它将无法正确显示，因为我们正在复制单个工作表。这显示在上面的函数中，可以添加到“spread.addNamedStyle()”。
添加该代码后，您现在可以加载多个 Excel 工作簿并使用 SpreadJS 将它们合并为一个。想要尝试该功能或查看 SpreadJS 的其他惊人功能，可前往葡萄城官网立即下载试用版！
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: 使用session+cookie改造单表项目用户登录部门列表新增部门部门详情修改部门
1. session掌握之后，我们怎么解决oa项目中的登录问题，怎么能让登录起作用。 44 1.1 思路 44 – 登录成功之后，可以将用户的登录信息存储到session当中。也就是说session中如果有用户的信息就代表用户登录成功了。sessio…
