本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

前言|问题背景

  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 工作簿的更多相关文章

  1. 合并多个excel工作簿

    合并多个Excel工作簿,会出现电话号码以科学计数法显示,如果想要以字符串方式处理,要按如下完整代码 public static void mergeWorkBook() throws Excepti ...

  2. EXCEL中,怎样查看一个工作簿中有几个工作表?

    EXCEL中,怎样查看一个工作簿中有几个工作表 有几个EXCEL文件,每个文件(工作簿)中都有上百个工作表, 怎样可以一次性查看一个簿包含几个表? 目前好像没有直接可以看到有多少张工作表的按钮,这就需 ...

  3. 怎么拆分一个Excel工作簿中的多个工作表?

    打开需要编辑的Excel文档.如图所示,工作簿下方有很多工作表.现在需要将这些工作表单独拆分开成一个个工作簿.   右键任意一个工作表标签,在弹出的下拉列表中选择查看代码.即弹出代码窗口.如下图所示. ...

  4. excel-合并多个Excel文件--VBA合并当前目录下所有Excel工作簿中的所有工作表

    在网上找EXCEL多文件合并的方法,思路: 一.Linux 或者window+cmder,直接用命令行cat合并EXCEL文件,但是,需要安装辅助东西才能直接处理(也许也不可以,但是,可以用文件格式转 ...

  5. 在 Excel 工作簿中定义决策表(Oracle Policy Modeling-Define decision tables in Excel workbooks)

    要在 Excel 中编写规则,您只需在表中编写规则,并使用 Oracle Policy Modeling 样式标识单元格中的信息类型, 以便这些规则可以编译并在 Oracle Determinatio ...

  6. 显示excel工作簿中所有工作表的名称!!!

    问题描述: 有一个工作簿里边将近二百多个工作表(公司),想统计里边所有公司名称即二百多个工作表的名称. 1.找一个空白工作表,也可以利用原来工作表中不用的列,转到“公式”工具栏,点击名称管理,在跳出来 ...

  7. 【VBA】读取另一个excel工作簿中的内容

    后台打开工作簿读取内容源码: Sub subOpenWorkbook() Dim datebase As String datebase = "... ....xlsx" Appl ...

  8. 一探前端开发中的JS调试技巧

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  9. 在Excel里如何将多个工作簿合并到一个工作簿中

    在Excel里如何将多个工作簿合并到一个工作簿中 当你必须将多个工作簿合并到一个工作簿时,你遇到过麻烦吗?最让人心烦的就是需要合并的工作簿里有很多张工作表.有人能推荐方法解决这个问题吗? 利用VBA ...

  10. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

随机推荐

  1. 全球IP whois信息获取与情报挖掘

    全球IP的whois信息获取与情报挖掘 什么是whois信息? Whois是一种网络协议,也是一种网络服务,能够让客户端查询域名或者IP是否注册,以及注册人的相关信息.我们通常所说的whois信息就是 ...

  2. DVWA-XSS(DOM)

    漏洞详解. DOM XSS(Cross-site scripting)是一种Web安全漏洞,它利用了浏览器的DOM(文档对象模型)解析机制,通过注入恶意代码来攻击用户. DOM XSS与传统的反射型或 ...

  3. 机器学习算法(八):基于BP神经网络的乳腺癌的分类预测

    机器学习算法(八):基于BP神经网络的乳腺癌的分类预测 1.算法简介和应用 1.1 算法简介 BP(Back Propagation)网络是1986年由Rumelhart和McCelland为首的科学 ...

  4. Spring事务——传播性

    传播性 事务传播行为是为了解决业务层方法之间互相调用的事务问题,当一个事务方法被另一个事务方法调用时,事务该以何种状态存在?例如新方法可能继续在现有事务中运行,也可能开启一个新事务,并在自己的事务中运 ...

  5. 清理过时的.NET SDK 和 运行时

    TL;DR .NET 卸载工具 随着这几年.NET 的快速发展,电脑上的.NET SDK 和 runtime 也在不断的积累.每个sdk动辄都是上百兆的空间占用,很快本来就不富裕的C盘空间就更加紧俏了 ...

  6. 【Vue】Vuex

    Vuex简介 概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中管理(读.写),也是一种适用于任意组件间的通信方式. 什么时候用Vuex ①多个 ...

  7. 【vue3-element-admin】Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范

    前言 本文介绍 vue3-element-admin 如何通过 Husky + Lint-staged + Commitlint + Commitizen + cz-git 来配置 Git 提交代码规 ...

  8. ES6中新增的promise异步编程解决方案

    promise异步编程解决方案 第1章 准备 1.1 区别实例对象与函数对象 (1).实例对象:通过    new 函数    产生的对象,称为实例对象,简称对象 (2).函数对象:将函数作为对象使用 ...

  9. 快速上手Linux核心命令(三):文件和目录操作命令

    @ 目录 前言 cd 切换目录 pwd 显示当前路径 ls 显示目录下内容及相关属性信息 mkdir 创建目录 tree 以树形结构显示目录下的内容 touch 创建空白文件或改变文件的时间戳属性 c ...

  10. CVE-2016-3088漏洞复现

    1.背景介绍. ActiveMQ的web控制台分三个应用,admin.api和fileserver,其中admin是管理员页面,api是接口,fileserver是储存文件的接口:admin和api都 ...