如何使用 JavaScript 导入和导出 Excel

前言

在现代的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><scriptsrc="./node_modules/jquery/dist/jquery.min.js"type="text/javascript"></script><scriptsrc="./node_modules/file-saver/src/FileSaver.js"type="text/javascript"></script><linkhref="./node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="./node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"></script><scripttype="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 filesaveAs(blob, fileName);},function (e) {console.log(e);},{fileType: GC.Spread.Sheets.FileType.excel,});
};

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

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

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

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

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

文件成功导出后,在 Excel 中打开它,可以看到该文件看起来与导入时一样,只是现在我们添加了一条额外的收入线。

总结

以上就是使用JavaScript 导入和导出 Excel的全过程,如果您想了解更多的信息,欢迎点击这篇参考资料查看。

扩展链接:

【干货放送】财务报表勾稽分析要点,一文读尽!

为什么你的财务报表不出色?推荐你了解这四个设计要点和!

纯前端类 Excel 表格控件在报表勾稽分析领域的应用场景解析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771614.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Airflow【部署 01】调度和监控工作流工具Airflow官网Quick Start实操(一篇学会部署Airflow)

Airflow官网Quick Start实操 1.环境变量设置2.使用约束文件进行安装3.启动单机版3.1 快速启动3.2 分步骤启动3.3 启动后3.4 服务启动停止脚本 4.访问4.1 登录4.2 测试 来自官网的介绍&#xff1a; https://airflow.apache.org/ Airflow™是一个由社区创建的平台&#xff0c;以…

FFmpeg+mediamtx 实现将本地摄像头推送成RTSP流

文章目录 概要推流过程实现过程安装FFmpeg安装Mediamtx 启动推流 概要 FFmpegmediamtx实现将本地摄像头推送成RTSP流 FFmpeg 版本号为&#xff1a;N-114298-g97d2990ea6-20240321 mediamtx 版本号为&#xff1a;v1.6.0 推流过程 摄像头数据&#xff0c;经过ffmpeg的推流代码…

ESCTF-OSINT赛题WP

这你做不出来?check ESCTF{湖北大学_嘉会园食堂} 这个识图可以发现是 淡水渔人码头 但是 osint 你要发现所有信息 聊天记录说国外 同时 提示给了美国 你综合搜索 美国 渔人码头 在美国旧金山的渔人码头&#xff08;英语&#xff1a;Fisherman’s Wharf&#xff09;是一个著名旅…

ubuntu虚拟机扩展容量后,无效,其实还需要分配

参考这位大佬&#xff1a;https://www.cnblogs.com/learningendless/p/17718003.html 如果直接使用磁盘调整大小会发现有钥匙 会被锁住&#xff0c;无法调整&#xff0c;按照大佬步骤做&#xff0c;亲测有效

浅谈关于Linux的学习

Linux的整个知识构架是&#xff1a; 1、基本指令 2、系统编程 3、网络编程 指令只是很基础的一部分&#xff0c;学习Linux更加重要的是其底层原理的知识&#xff0c;需要从基本的指令开始&#xff0c;逐级而上&#xff0c;次第往深处挖掘。最后构建起整个的知识体系。而不是仅…

docker容器虚拟化-4

文章目录 虚拟化网络单节点容器间通信不同节点容器间通信 虚拟化网络 Network Namespace 是 Linux 内核提供的功能&#xff0c;是实现网络虚拟化的重要功能&#xff0c;它能创建多个隔离的网络空间&#xff0c;它们有独自网络栈信息。不管是虚拟机还是容器&#xff0c;运行的时…

【大模型 数据增强】LLM2LLM:迭代学习 + 针对性增强 + 错误分析 + 合成数据生成 + 质量控制

LLM2LLM&#xff1a;迭代学习 针对性增强 错误分析 合成数据生成 质量控制 提出背景针对性和迭代性数据增强&#xff08;LLM2LLM&#xff09;步骤1&#xff1a;在数据集上训练步骤2&#xff1a;在数据集上评估步骤3&#xff1a;生成额外数据 算法流程医学领域数据增强&…

c++之旅第八弹——多态

大家好啊&#xff0c;这里是c之旅第八弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一&#xff0…

Java项目:74 ssm基于Java的超市管理系统+jsp

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 功能包括:商品分类&#xff0c;供货商管理&#xff0c;库存管理&#xff0c;销售统计&#xff0c;用户及角色管理&#xff0c;等等功能。项目采用mave…

Selenium 自动化 —— 浏览器窗口操作

更多内容请关注我的专栏&#xff1a; 入门和 Hello World 实例使用WebDriverManager自动下载驱动Selenium IDE录制、回放、导出Java源码 当用 Selenium 打开浏览器后&#xff0c;我们就可以通过 Selenium 对浏览器做各种操作&#xff0c;就像我们日常用鼠标和键盘操作浏览器一…

Spring Data Elasticsearch 与ES版本对应关系记录

参考&#xff1a; Versions :: Spring Data Elasticsearch

探索文件管理新境界:XYplorer,您的高效办公助手

在这个数字化时代&#xff0c;文件管理已经成为我们日常工作和生活中不可或缺的一部分。但是&#xff0c;你是否经常在寻找一个文件时感到力不从心&#xff1f;是否厌倦了传统的文件管理方式&#xff1f;别担心&#xff0c;XYplorer 来了&#xff0c;它将彻底改变你的文件管理体…

❤ leetCode简易题1-两数之和、简易2--回文数判断、简易14-最长公共前缀

❤ leetCode简易题1-两数之和、简易题14- 最长公共前缀 1、简易1-两数之和 ① 题目要求 数字A B target&#xff0c;以target为求和结果&#xff0c;找出数组中符合的A、B数字下标。 第一次做的时候完全脑子一片蒙&#xff0c;随后认真看了看题目发现是发现找符合target和…

了解一波经典的 I/O 模型

最近读了波网络 I/O 相关的文章&#xff0c;做下总结、摘录。&#xff08;未完&#xff09; 经典 I/O 模型 {% checkbox red checked, 阻塞式 I/O&#xff08;blocking I/O&#xff09; %}{% checkbox red checked, 非阻塞式 I/O&#xff08;non-blocking I/O&#xff09; %}…

docker可视化界面 - portainer安装

目录 一、官方安装说明 二、安装portainer 2.1拉取镜像 2.2运行portainer容器 2.3登录和使用portainer 一、官方安装说明&#xff1a; Install PortainerChoose to install Portainer Business Edition or Portainer Community Edition.https://www.portainer.io/install…

C# LINQ笔记

C# LINQ笔记 from子句 foreach语句命令式指定了按顺序一个个访问集合中的项。from子句只是声明式地规定集合中的每个项都要访问&#xff0c;并没有指定顺序。foreach在遇到代码时就执行其主体。from子句什么也不执行&#xff0c;只有在遇到访问查询变量的语句时才会执行。 u…

Unbtun环境切换

之前的环境都是下载到系统环境里面的&#xff0c;后面安装了anaconda发现切换不到系统环境里面了&#xff0c;通过查找资料可以发现&#xff1a; ubuntu的python可分为三大类&#xff1a; ubuntu自带的系统python环境 一般安装在/usr/bin/中python2和python3可以共存 anaconda…

[Qt学习笔记]Qt实现自定义控件SwitchButton开关按钮

1、功能介绍 在项目UI中使用较多的打开/关闭的开关按钮&#xff0c;一般都是找图片去做效果&#xff0c;比如说如下的图像来表征打开或关闭。 如果想要控件有打开/关闭的动画效果或比较好的视觉效果&#xff0c;这里就可以使用自定义控件&#xff0c;使用Painter来绘制控件。软…

JavaScript的学习笔记

<script src"index.js" defer></script>&#xff0c;defer的作用是延迟加载index.js文件 定义变量 变量的类型分为两大类&#xff1a;基本类型和复合类型 JavaScript是一种弱类型语言&#xff0c;所以没有强类型语言所具有的int,float,char等等&#x…

VScode通过ssh连接github

通过ssh连接github 1.生成公钥和私钥2.设置config文件3.配置ssh免密登录4.远程仓库初始化 1.生成公钥和私钥 首先选择一个文件夹&#xff0c;右击 git bash here&#xff0c;在命令行输入命令&#xff0c;按下三次回车生成一个**.ssh文件夹**&#xff0c;一般在用户的user根目…