百度360必应搜狗淘宝本站头条
docker systemdzabbix微信报警脚本loadjsqt5.5pagination.js
当前位置：网站首页 > 技术教程 > 正文

前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件

suiw9 2024-11-24 21:43 21 浏览 0 评论

JavaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaScript实现”。

Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行数据管理。

作为全球领先的软件开发技术和低代码平台提供商，葡萄城专注开发技术和工具已经长达四十余年，一直以来引领着国内控件技术和数据分析工具的发展。SpreadJS表格控件作为葡萄城的核心产品，能够完美兼容 Excel 的功能和使用体验并高度匹配在线办公场景的需求。

SpreadJS可以为我们的Web应用提供更好的交互体验，以及更灵活的权限控制、数据整合、数据可视化、战略绩效测量 (SPM)、复杂的统计分析等。多年来，Excel 兼容性一直是SpreadJS最重要的功能之一。

SpreadJS 提供了熟悉的 Excel 电子表格界面。用户可以通过SpreadJS直接在页面端导入和导出 Excel 文件——这一切无需依赖 Excel。

在本博客中，我们将介绍如何按照以下步骤在 JavaScript 中，实现页面端电子表格导入/导出到 Excel：

1. 设置 JavaScript 电子表格项目

2. 添加 Excel 导入代码

3. 将数据添加到导入的 Excel 文件

4. 添加迷你图

5. 添加 Excel 导出代码

设置 JavaScript 电子表格项目

首先，我们可以使用托管在 NPM 上的 SpreadJS 文件。为此，我们可以使用命令行参数进行安装。打开命令提示符并导航到应用程序的位置。在那里，您可以使用一个命令安装所需的文件。

在这种情况下，我们需要基本的 Spread-Sheets 库、Spread-ExcelIO 和 jQuery：

npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery

SpreadJS 不依赖于 jQuery，但在这种情况下，我们使用它来提供简单的跨域请求支持，稍后我们将对其进行回顾。

一旦安装了这些，我们就可以在我们的代码中添加对这些脚本和 CSS 文件的引用：

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS ExcelIO</title>
<script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<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>
<body>
<div id="ss" style="height:600px; width :100%; "></div>
</body>
</html>

除了 SpreadJS 和 jQuery 文件之外，我们还需要导入 FileSaver 库，为了便于后续程序处理，SpreadJS默认提供完整的文件流，FileSaver库可以用来把文件流转成文件下载到本地。

然后我们可以在页面中添加一个脚本来初始化 Spread.Sheets 组件和一个 div 元素来包含它（因为 SpreadJS 电子表格组件使用了一个画布，这是初始化组件所必需的）：

<script type="text/javascript">
$(document).ready(function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
});
</script>
</head>
<body>
<div id="ss" style="height:600px ; width :100%; "></div>
</body>

添加 Excel 导入代码

我们需要创建一个客户端 ExcelIO 组件的实例，我们可以使用它来打开文件：

var excelIO = new GC.Spread.Excel.IO();

然后我们需要添加一个函数来导入文件。在此示例中，我们导入了一个本地文件，但您可以对服务器上的文件执行相同的操作。如果从服务器导入文件，您需要引用该位置。下面是一个输入元素的示例，用户可以在其中输入文件的位置：

<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />

一旦你有了它，你可以直接在脚本代码中访问该值：

var excelUrl = $("#importUrl").val();

导入函数的以下代码使用“excelUrl”变量的本地文件：

function ImportFile() {
var excelUrl = "./test.xlsx";

var oReq = new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType = 'blob';
oReq.onload = function () {
var blob = oReq.response;
excelIO.open(blob, LoadSpread, function (message) {
console.log(message);
});
};
oReq.send(null);
}
function LoadSpread(json) {
jsonData = json;
workbook.fromJSON(json);

workbook.setActiveSheet("Revenues (Sales)");
}

无论您是在服务器上还是在本地引用文件，都需要在 $(document).ready 函数内的脚本中添加以下内容：

$(document).ready(function () {
$.support.cors = true;
workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//...
});

在这种情况下，我们需要启用 Cross-Origin-Request-Support，因为我们可能会从 URL 加载文件。因此 $.support.cors = true;行，否则尝试加载它会导致 CORS 错误。

将数据添加到导入的 Excel 文件

我们使用本教程的“损益表”Excel 模板导入本地文件。

现在我们可以使用 Spread.Sheets 脚本在这个文件中添加另一个收入行。让我们在页面上添加一个按钮来执行此操作：

<button id="addRevenue">Add Revenue</button>

我们可以为该按钮的单击事件处理程序编写一个函数来添加一行并从前一行复制样式以准备添加一些数据。要复制样式，我们需要使用 copyTo 函数并传入：

1. 原始和目标行和列索引

2. 行数和列数

3. 样式的 CopyToOptions 值

document.getElementById("addRevenue").onclick = function () {
var sheet = workbook.getActiveSheet();
sheet.addRows(newRowIndex, 1);
sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);
}

以下用于添加数据和 Sparkline 的脚本代码将包含在此按钮单击事件处理程序中。对于大部分数据，我们可以使用 setValue 函数。这允许我们通过传入行索引、列索引和值来在 Spread 中的工作表中设置值：

sheet.setValue(newRowIndex, 1, "Revenue 8");
for (var c = 3; c < 15; c++) {
sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}

在 P 列中设置 SUM 公式以匹配其他行并为 Q 列设置百分比：

sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])")
sheet.setValue(newRowIndex, 16, 0.15);

最后，我们可以再次使用 copyTo 函数将先前行中的公式复制到 R 到 AD 列的新行，这次使用 CopyToOptions.formula：

sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);

添加迷你图

现在，我们可以添加迷你图来匹配其他数据行。为此，我们需要提供一系列单元格以从中获取数据以及迷你图的一些设置。在这种情况下，我们可以指定：

1. 单元格的范围，我们只是将数据添加到

2. 使迷你图看起来像同一列中的其他迷你图的设置

var data = new GC.Spread.Sheets.Range(11, 3, 1, 12);
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor = "Text 2";
setting.options.lineWeight = 1;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.lowMarkerColor = "Text 2";
setting.options.highMarkerColor = "Text 1";

之后，我们调用 setSparkline 方法并指定：

1. 迷你图的位置

2. 数据的位置

3. 迷你图的方向

4. 迷你图的类型

5. 我们创建的设置

sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);

如果您现在尝试运行代码，它可能看起来有点慢，因为每次更改数据和添加样式时工作簿都会重新绘制。为了显着加快速度并提高性能，Spread.Sheets 提供了暂停绘画和计算服务的能力。让我们在添加一行及其数据之前添加代码以暂停两者，然后在之后恢复两者：

workbook.suspendPaint();
workbook.suspendCalcService();
//...
workbook.resumeCalcService();
workbook.resumePaint();

添加该代码后，我们可以在 Web 浏览器中打开该页面，并查看 Excel 文件加载到 Spread.Sheets 中并添加了收入行。重要提示：请记住，出于安全考虑，Chrome 不允许您打开本地文件，因此您需要使用 Firefox 等网络浏览器才能成功运行此代码。或者，从网站 URL 加载文件应该可以在任何浏览器中正常打开。

添加 Excel 导出代码

最后，我们可以添加一个按钮来导出包含添加行的文件。为此，我们可以使用 Spread.Sheets 中内置的客户端 ExcelIO 代码：

function ExportFile() {
var fileName = $("#exportFileName").val();
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
var json = JSON.stringify(workbook.toJSON());

excelIO.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
if (e.errorCode === 1) {
alert(e.errorMessage);
}
});
}

该代码从 exportFileName 输入元素获取导出文件名。我们可以定义它并让用户像这样命名文件：

<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />

然后我们可以添加一个按钮来调用这个函数：

<button id="export">Export File</button>
document.getElementById("export").onclick = function () {
ExportFile();
}

添加收入行后，您可以使用“导出文件”按钮导出文件。确保添加 FileSaver 外部库以允许用户将文件保存在他们想要的位置：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

成功导出文件后，您可以在 Excel 中打开它，并查看文件与导入时的外观相同，只是现在我们添加了额外的收入行。

这只是一个示例，说明如何使用 SpreadJS JavaScript 电子表格将数据添加到 Excel 文件，然后使用简单的 JavaScript 代码将它们导出回 Excel。

相关推荐

nginx的反向代理（Nginx的反向代理和负载均衡）

nginxProxy代理1、代理原理反向代理服务的实现：需要有一个负载均衡设备（即反向代理服务器）来分发用户请求，将用户请求分发到后端正真提供服务的服务器上。服务器返回自己的服务到负载均衡设备。负...

Nginx UI: 更好用更现代化的Nginx 管理面板

各位铲屎官大家好，我是喵~...

性能测试之tomcat+nginx负载均衡（nginxtcp负载均衡）

nginxtomcat配置准备工作：两个tomcat执行命令cp-rapache-tomcat-8.5.56apache-tomcat-8.5.56_2修改被复制的tomcat2下con...

nginx upstream节点健康检查（nginx tcp 健康检查）

1、前提条件编译nginx时增加nginx_upstream_check_module模板git地址：https://github.com/yaoweibin/nginx_upstream_check...

Nginx 的高并发处理能力（nginx支持高并发原理）

为了实现Nginx的高并发处理能力，需要从**硬件资源**、**操作系统**、**Nginx配置**等多个方面进行优化。以下是详细的配置和示例：---...

Nginx最全详解(万字图文总结)（nginxs）

大家好，我是mikechen。Nginx是非常重要的负载均衡中间件，被广泛应用于大型网站架构，下面我就全面来详解Nginx@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题...

如何用 Nginx 实现前端灰度发布（nginx 灰度测试规则）

前言在前端开发中，灰度发布是一种重要的策略，它允许我们在不影响所有用户的情况下，逐步推出新功能或更新。通过灰度发布，我们可以测试新版本的稳定性和性能，同时收集用户反馈。今天，我们将探讨如何使用Ngi...

nginx配置优化场景-直接套用so happy!

前言(叠甲在先)Nginx是一款高性能的Web服务器，广泛应用于互联网领域。...

Nginx配置前后端服务（nginx前后端分离部署）

nginx安装完成后，可以通过命令查看配置文件nginx-t配置文件nginx.conf，是总的配置，有的人会把配置全部配置到这个文件中，如果服务很多，这个文件变得非常庞大，我见过一个配置很大的，在...

使用Nginx配置TCP负载均衡（nginx如何配置负载均衡）

假设Kubernetes集群已经配置好，我们将基于CentOS为Nginx创建一个虚拟机。...

Nginx服务器深度指南:安装、配置、优化指令超详解

在当今数字化时代，Web服务器是支撑互联网应用的关键基础设施。Nginx作为一款高性能的开源Web服务器，凭借卓越的性能、丰富的功能和出色的稳定性，在Web服务器领域占据了重要地位。无论是大型互联网公...

Nginx的配置详解(附代码)（nginx基本配置）

本篇文章给大家带来的内容是关于Nginx的配置详解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。常用配置项在工作中，我们与Nginx打交道更多的是通过其配置文件来进行。...

Nginx配置文件详解（nginx配置文件详解带实例）

Nginx配置文件详解Nginx是一款面向性能设计的HTTP服务器，相较于Apache、lighttpd具有占有内存少，稳定性高等优势。...

从 0 到 1:构建高可用 Linux 负载均衡集群(基于 Nginx + Keepalived)

在高并发业务场景下，单台服务器往往无法支撑大量请求，因此需要使用**负载均衡（LoadBalancing）**技术来提升系统的稳定性和可用性。Nginx+Keepalived是常见的开源负载均...

配置Nginx TCP转发（nginx 接口转发）

Nginx一般用在HTTP的转发，TCP的转发大都会使用HAProxy。工作中遇到一个需求，用到了Nginx服务作为TCP转发。场景是这样，数据采集设备通过公网将数据推送到后端应用服务，服务部署在业主...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.