如何使用 JavaScript 导入和导出 Excel
前言
在现代的Web应用开发中，与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析，与Excel文件的交互都扮演着至关重要的角色。本文小编将为大家介绍如何在熟悉的电子表格 UI 中轻松导入 Excel 文件，并以编程方式修改表格或允许用户进行编辑，最后使用葡萄城公司的纯前端表格控件SpreadJS组件它们导出回 Excel 文件。
我们将按照以下步骤介绍如何在 JavaScript 中导入/导出到 Excel：
- 搭建 JavaScript 电子表格项目
- 编写 Excel 导入代码并导入 Excel
- 将数据添加到导入的 Excel 文件
- 为表格添加迷你图
- 编写 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的全过程，如果您想了解更多的信息，欢迎点击这篇参考资料查看。
扩展链接：
纯前端类 Excel 表格控件在报表勾稽分析领域的应用场景解析
如何使用 JavaScript 导入和导出 Excel的更多相关文章
- 如何使用JavaScript导入和导出Excel文件
本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript是一个涵盖多种框架.直译式.可以轻松自定义客户端的脚本 ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- 前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ...
- [转]Java中导入、导出Excel
原文地址:http://blog.csdn.net/jerehedu/article/details/45195359 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样 ...
- 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续3篇-导出时动态生成多Sheet EXCEL）
ExcelUtility 类库经过我(梦在旅途)近期不断的优化与新增功能,现已基本趋向稳定,功能上也基本可以满足绝大部份的EXCEL导出需求,该类库已在我们公司大型ERP系统全面使用,效果不错,今天应 ...
- 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续2篇-模板导出综合示例）
自ExcelUtility类推出以来,经过项目中的实际使用与不断完善,现在又做了许多的优化并增加了许多的功能,本篇不再讲述原理,直接贴出示例代码以及相关的模板.结果图,以便大家快速掌握,另外这些示例说 ...
- 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续篇）
上周六我发表的文章<分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility>受到了大家的热烈支持与推荐,再此表示感谢,该ExcelUtility ...
- Java的导入与导出Excel
使用Jakarta POI导入.导出Excel Jakarta POI 是一套用于访问微软格式文档的Java API.Jakarta POI有很多组件组成,其中有用于操作Excel格式文件的HSSF和 ...
- Java中导入、导出Excel
原文:Java中导入.导出Excel 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已 ...
- Java中使用poi导入、导出Excel
一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...
随机推荐
- Smartctrl 命令使用说明
一.smartctl工具简介 Smartmontools是一种硬盘检测工具,通过控制和管理硬盘的SMART(Self Monitoring Analysis and Reporting Techno ...
- Linux常用的20个命令(下)
无论你是后端程序员还是前端程序员,都避免不了和Linux打交道.上篇介绍了Linux常用的20个命令其中的10个,本文继续介绍剩下的10个命令. 11.man 命令 manual的缩写,即使用手册的意 ...
- DS12C887时钟模块, STC89和STC12的代码实现
DS12C887是时钟芯片DS12C885集成了电池和晶振的版本. 如果拆掉DS12C887的外壳, 能看到里面就是DS12C885. 功能特性 能输出世纪.年.月.日.时.分.秒等时间信息 集成电池 ...
- Wireguard笔记(一) 节点安装配置和参数说明
目录 Wireguard笔记(一) 节点安装配置和参数说明 Wireguard笔记(二) 命令行操作 Wireguard笔记(三) lan-to-lan子网穿透和多网段并存 简介 虚拟子网软件,类似于 ...
- YOLOV3目标检测模型训练实例
YOLOV3目标检测 从零开始学习使用keras-yolov3进行图片的目标检测,比较详细地记录了准备以及训练过程,提供一个信号灯的目标检测模型训练实例,并提供相关代码与训练集. DEMO测试 YOL ...
- Direct2D CreateHwndRenderTarget 和 CreateDCRenderTarget
前段时间稍微看了点Direct3D, 觉得挺有意思的,但是想着要有3D得先从2D开始.故开始了D2D旅行. 如标题所示,CreateHwndRenderTarget 是在用来创建一个渲染到窗口的渲染目 ...
- 【LeetCode动态规划#17】知道秘密的人，维护多个dp数组
知道秘密的人数 在第 1 天,有一个人发现了一个秘密. 给你一个整数 delay ,表示每个人会在发现秘密后的 delay 天之后,每天 给一个新的人 分享 秘密.同时给你一个整数 forget ,表 ...
- Hello-FPGA CoaXPress 2.0 FPGA DEVICE IP Core Demo
Hello-FPGA CoaXPress 2.0 Device FPGA IP Core Demo 1 说明 本手册针对Helllo-FPGA的CoaXPress 2.0 DEVICE FPG ...
- nodejs内存泄漏概要分析
const heapdump = require('heapdump'); setTimeout( ()=>{ heapdump.writeSnapshot(`${process.cwd()}/ ...
- php的php-fpm
FastCgi与PHP-fpm到底是个什么样的关系 昨晚有一位某知名在线教育的大佬问了我一个问题,你知道php-fpm和cgi之间的关系吗?作为了一个5年的phper了,这个还不是很简单的问题,然后我 ...