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

如何使用 JavaScript 导入和导出 Excel XLSX

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

前言

在现代的Web应用开发中，与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析，与Excel文件的交互都扮演着至关重要的角色。

本文小编将为大家介绍如何在熟悉的电子表格 UI 中轻松导入 Excel 文件，并以编程方式修改表格或允许用户进行编辑，最后使用葡萄城公司的纯前端表格控件SpreadJS组件它们导出回 Excel 文件。

我们将按照以下步骤介绍如何在 JavaScript 中导入/导出到 Excel：

  1. 搭建 JavaScript 电子表格项目
  2. 编写 Excel 导入代码并导入 Excel
  3. 将数据添加到导入的 Excel 文件
  4. 为表格添加迷你图
  5. 编写 Excel 导出代码并导出 Excel

操作步骤

1）搭建 JavaScript 电子表格项目

首先，我们可以使用 NPM 来下载 SpreadJS 文件。可以使用以下的命令行来安装 SpreadJS：

npm i @grapecity-software/spread-sheets @grapecity-software/spread-sheets-io file-saver jquery

安装完之后，我们可以在一个简单的 HTML 文件中添加对这些脚本和 CSS 文件的引用，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>SpreadJS Import and Export Xlsx</title>
    <script
      src="./node_modules/jquery/dist/jquery.min.js"
      type="text/javascript"
    ></script>
    <script
      src="./node_modules/file-saver/src/FileSaver.js"
      type="text/javascript"
    ></script>
    <link
      href="./node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      type="text/javascript"
      src="./node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js"
    ></script>
  </head>
  <body>
    <div id="ss" style="height:600px; width :100%; "></div>
  </body>
</html>

然后我们可以在页面中添加一个脚本来初始化 SpreadJS Workbook 组件和一个 div 元素来作为容器：

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

2）编写 Excel 导入代码并导入 Excel

我们需要添加一个 input 元素和一个 button 来选择 Excel 文件。

<body>
  <div id="ss" style="height:700px; width:100%;"></div>
  <input type="file" id="selectedFile" name="files[]" accept=".xlsx" />
  <button class="settingButton" id="open">Open</button>
</body>

然后我们需要使用 spread.import() 方法来导入 Excel 文件。我们将在按钮的点击事件中导入用户选择的本地文件。

document.getElementById("open").onclick = function () {
  var file = document.querySelector("#selectedFile").files[0];
  if (!file) {
    return;
  }
  workbook.import(file);
};

现在就可以在 JavaScript 电子表格组件中导入和查看 Excel (.xlsx) 文件了，如下所示：

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

在这里，我们将使用 利润损失表.xlsx 作为模板，如下图所示：

现在我们需要添加一个按钮来将数据添加到导入的 Excel 文件中。

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

可以为该按钮的点击事件编写一个函数来为表格添加一行并复制前一行的样式，为接下来添加数据做准备。要复制样式，我们需要使用 copyTo() 函数并传入：

  • 起始和目标行索引和列索引
  • 复制的行数和列数
  • 复制模式 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
  );
};

下面是用于添加数据和迷你图的代码。对于大多数数据，我们可以使用 setValue() 函数。这允许我们通过传入行索引、列索引和值来设置 Spread 中工作表中的值：

var cellText = "Revenue" + revenueCount++;
sheet.setValue(newRowIndex, 1, cellText);

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
);

4）为表格添加迷你图

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

  • 我们刚刚添加数据的单元格范围
  • 调整迷你图的设置使其更加美观
var data = new GC.Spread.Sheets.Range(newRowIndex, 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() 方法并指定：

  • 迷你图的位置
  • 数据的位置
  • 迷你图的方向
  • 迷你图的类型
  • 之前创建的设置
sheet.setSparkline(
  newRowIndex,
  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();

添加完该代码后，我们可以在浏览器中打开该页面，并看到 Excel 文件加载到 Spread.Sheets 中，并添加了收入行。

5）编写 Excel 导出代码并导出 Excel

最后，我们可以添加一个按钮来导出包含了刚刚添加的收入行的文件。为了实现这个需求，我们可以在单击事件处理程序的导出按钮中调用 Spread.Sheets 中内置的导出方法：

document.getElementById("export").onclick = function () {
  var fileName = $("#exportFileName").val();
  if (fileName.substr(-5, 5) !== ".xlsx") {
    fileName += ".xlsx";
  }
  var json = JSON.stringify(workbook.toJSON());
  workbook.export(
    function (blob) {
      // save blob to a file
      saveAs(blob, fileName);
    },
    function (e) {
      console.log(e);
    },
    {
      fileType: GC.Spread.Sheets.FileType.excel,
    }
  );
};

该代码从 exportFileName 输入元素获取导出文件名。我们可以自定义它的文件名：

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

然后添加一个调用此函数的按钮：

<button id="export"Export File</button

添加收入行后，使用导出文件按钮导出文件。

文件成功导出后，在 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.