如何使用 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打印.这样在我们实际 ...
随机推荐
- NC18389 收益
题目链接 题目 题目描述 小N是一家金融公司的项目经理.他准备投资一个项目,这个项目要融资L元,融资成功后会得到M元的利润.现在有n个客户.对于第i个客户,他有mi元钱.小N承诺假如最后筹够钱,会给这 ...
- Java集合篇之深度解析Queue，单端队列、双端队列、优先级队列、阻塞队列
写在开头 队列是Java中的一个集合接口,之前的文章已经讲解了List和Set,那么今天就来唠一唠它吧.队列的特点:存储的元素是有序的.可重复的. 队列的两大接口Queue vs Deque Queu ...
- 2022年3月核心库MySQL优化总结
2021年9月底到新公司,公司核心数据库,以前无专业DBA维护,问题多,隐患大,到2022年2月持续后,优化至今: 优化大项: 1,从1主3从,扩容到1主5从,将部分读放都另外新加从库 2,最大表 ...
- Error: testWhileIdle is true, validationQuery not set
说明 使用springboot连接数据库,启动的时候报错:testWhileIdle is true, validationQuery not set.但是不影响系统使用,数据库等一切访问正常.记录备 ...
- Java I/O 教程（六） BufferedInputStream 类
Java BufferedInputStream Class Java BufferedInputStream class 用于从输入流读取数据,和BufferedOutStream一样内部使用缓冲机 ...
- Linux驱动开发笔记（四）：设备驱动介绍、熟悉杂项设备驱动和ubuntu开发杂项设备Demo
前言 驱动的开发需要先熟悉基本概念类型,本篇讲解linux杂项设备基础,还是基于虚拟机ubuntu去制作驱动,只需要虚拟机就可以尝试编写注册杂项设备的基本流程. linux三大设备驱动 字符设 ...
- Qt开发技术：QCharts（四）QChart面积图介绍、Demo以及代码详解
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- maven配置全局私服地址和阿里云仓库
直接上配置代码 <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apa ...
- 【Azure 媒体服务】使用媒体服务 v3 对视频进行上载、编码和流式传输时遇见的AAD错误
问题描述 使用媒体服务 v3 对视频进行上载.编码和流式传输示例时,遇见了AAD错误. TIP: Make sure that you have filled out the appsettings. ...
- 解密Spring中的Bean实例化：推断构造方法（上）
在Spring中,一个bean需要通过实例化来获取一个对象,而实例化的过程涉及到构造方法的调用.本文将主要探讨简单的构造推断和实例化过程,让我们首先深入了解实例化的步骤. 实例化源码 protecte ...