个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
26
4
本文由葡萄城技术团队于博客园原创并首发。 葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者.
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"
));
}
。
。
对于这个页面，我们将添加代码让用户加载任意数量的工作簿，然后单击一个按钮将它们合并为一个并在 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);
}
。
当用户准备好最终将所有工作簿合并为一个时，他们可以单击“合并工作簿”按钮，将每个工作簿中的每个工作表复制到页面上可见的 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工作簿的文章就讲到这里了,如果你想了解更多关于如何在前端应用中合并多个Excel工作簿的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
我想制作一个引用另一个 excel 文件中的单元格的公式。我已经弄清楚了，如下所示: ='C:\Users\17\Desktop\[JAN-11 2011.xlsx]1'!$H$44 但由于此工作表中
有谁知道是否可以在 Excel 中生成缺少地址门牌号的报告？ 例如，我们在 Apple St (no.5, 9, 11) 有三个地址记录，是否可以生成一个报告: 列出工作簿中每条街道的所有记录街道编号
这个问题已经有答案了: VBA auto hide ribbon in Excel 2013 (7 个回答) 已关闭 4 年前。 我试图在打开工作文件时隐藏我的丝带。 我已点击以下链接，但不断收到运行
我编写了一个 VBA 程序来删除元音。我无法从 excel 调用该函数。我收到 #NAME 错误。下面的代码 Function REMOVEVOWELS(Txt) As String 'Removes
嗨，我正在尝试在 MS excel 中应用一个函数(正确函数) 但是当我编写这个函数并使用填充句柄将其复制到其他单元格时，我在所有复制的单元格中得到相同的输出。 但是当我点击单元格时，引用是好的。但结
假设我有一个格式如下的电子表格: Sheet 1 | Sheet 2 name email | name e
我正在尝试简化财务报告中的数据输入，因此我尝试使用 Excel Visual Basic 制作表格。 到目前为止我做了2个用户表单，以后我会做5个。我做了用户表单，以便数据输入运算符(operator
我需要对单元格公式而不是单元格内容执行 Mid 或 Find。 如果我的单元格公式是: =[功能](Arg1, Arg2, Arg3) 我需要能够将 Arg2 提取到另一个单元格。 如果不使用 VBA
我想用 VBA 管理嵌入在另一个 Excel 文件中的 Excel 文件。我可以使用 .docx 文档找到很多结果，但我坚持使用 .xlsx 文档。 我最后一次尝试是使用 OLE 对象，但停留在“Sa
我最近一直在尝试使用 perl 和一些模块来读取 Excel 文件，尤其是单元格的格式。 例如，我写了一段使用 ParseExcel 模块读取单元格背景颜色的 perl 代码。然而，在测试时我注意到对
我目前正在使用 Maatwebsite 的 Excel 包，并且能够很好地生成一个包含我想要的列和值的表格，但我希望能够生成表格，其他表格位于单个 Excel 工作表的下方。可能吗？ 上面附上的屏幕截
我需要以下方面的指导。我有一个包含 150000 条记录的文件 (excel)。收到另一个包含 5000-6000 条记录的 excel 文件，需要根据第二个文件中信息的某些条件删除该行。 我使用字典
我有我认为的标准公式，根据我使用的 Excel 版本、Excel 365 或 Excel 2019 的不同，它的行为会有所不同 =IF(F5=$M$1;IFERROR(IF(AND(IFERROR(F
信息: 我有一个名为 Demo.xlsm 的 Excel 文件 此文件包含一个名为 UserForm1 的用户表单，该用户表单会在打开文件时自动加载。 打开文件时，名为 Demo.xlsm 的工作簿也
我在A Excel工作表中有一个列，其值是1 1 1 2 2 2 3 3 3 4 4 4....，在B Excel工作表中有另一列，其值1 2 4 ....，什么我想要的是从 B 读取值并查看它们是否
所以，我有这个问题，我想通过使用 OR 函数检查调整列的条件来找到列的平均值，我尝试将 OR 放入 AverageIf 函数，失败，还尝试了“Average(IF( OR("再次不是正确的返回。认为这
假设我想要这种类型的formula = SUM(startcell:endcell)的答案，但是startcell和endcell组件发生了变化。 因此，我希望能够使用 和 中的任何值，而不是直接在公
我正在寻找一个简单的 Excel 宏，它可以根据单元格中的特定数字/值将行从一张工作表复制到 Excel 中的另一张工作表。我有两张纸。一个称为“master”，另一个表称为“top10”。 这是数据
我正在尝试调用另一个工作簿中的 Excel 宏。它是一个特定于工作表的宏，但 Microsoft 文档和网上研究给出的语法仅提供了一种仅通过工作簿访问宏的方法。该语法是: Application.Ru
我检查了很多不同的帖子，但似乎找不到我正在寻找的确切代码。另外，我以前从未使用过 VBA，因此我尝试从其他帖子中获取代码并输入我的信息以使其正常工作。还没有运气。在工作中，我们有一个 Excel 薪资
我是一名优秀的程序员,十分优秀！