JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法

目录
  • 设置 JavaScript 电子表格项目
  • 添加 Excel 导入代码
  • 将数据添加到导入的 Excel 文件
  • 添加迷你图
  • 添加 Excel 导出代码

JavaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaScript实现”。
Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行数据管理。

在本博客中，我们将介绍如何按照以下步骤在 JavaScript 中，实现页面端电子表格导入/导出到 Excel：
完整Demo示例请点击此处下载。

  • 设置 JavaScript 电子表格项目
  • 添加 Excel 导入代码
  • 将数据添加到导入的 Excel 文件
  • 添加迷你图
  • 添加 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 脚本在这个文件中添加另一个收入行。让我们在页面上添加一个按钮来执行此操作：
Add Revenue

我们可以为该按钮的单击事件处理程序编写一个函数来添加一行并从前一行复制样式以准备添加一些数据。要复制样式，我们需要使用 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);
}

以下用于添加数据和 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);
}

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

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

添加迷你图

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

  • 单元格的范围，我们只是将数据添加到
  • 使迷你图看起来像同一列中的其他迷你图的设置
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 方法并指定：

  • 迷你图的位置
  • 数据的位置
  • 迷你图的方向
  • 迷你图的类型
  • 我们创建的设置
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。

在另一个系列文章中，我们演示了如何在其他 Javascript 框架中导入/导出 Excel 电子表格：

  • React
  • Vue
  • Angular

本文示例下载地址：https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjMzMzU3fGU0NTJlZWEyfDE2NjM3MjYyNTl8NjI2NzZ8OTk3MTg%3D

更多纯前端表格在线demo示例 :https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html
纯前端表格应用场景：https://www.grapecity.com.cn/developer/spreadjs#scenarios
移动端示例（可扫码体验）：http://demo.grapecity.com.cn/spreadjs/mobilesample/

到此这篇关于如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件的文章就介绍到这了,更多相关js使用SpreadJS导入和导出 Excel内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js使用xlsx读取excel文件的详细步骤

    目录 下载安装插件 文件基础 获取文件对象 读取文件数据 读取Excel 通过xlsx获取workbook WorkBook介绍 读取WorkBook 导出Excel 生成sheet 总结 下载安装插件 npm install xlsx or yarn add xlsx 此时,在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖. 文件基础 获取文件对象 我比较推荐使用h5的原生文件上传项 <input type="file" id=&quo

  • javascript 实现纯前端将数据导出excel两种方式

    目录 前言 方法一 方法二 前言 修改之前项目代码的时候,发现前人导出excel是用纯javascript实现的.并没有调用后台接口. 之前从来没这么用过,记录一下.以备不时之需. 方法一 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html, 代码如下: <html> <head>     <p style="font-size: 20p

  • 使用JS解析excel文件的完整实现步骤

    目录 前言 excel 表格文件到底是什么 JS 实现步骤 ZIP 解压 XML 解析 总结 前言 今天来聊一聊如何使用 JS 来解析 excel 文件,当然不是直接使用 exceljs.sheetjs 之类的库,那就没意思了,而是主要说一下 JS 解析 excel 表格是如何实现的. 注意本文主要讨论 xlsx 格式的 excel 表格,其它格式未探究并不清楚. excel 表格文件到底是什么 首先要解析 excel 文件,得先了解他是如何存储数据的,经过我百般搜索,终于在 GG 中找到了答案

  • js前端实现word excel pdf ppt mp4图片文本等文件预览

    js前端实现word excel pdf ppt mp4图片文本等文件预览

    目录 前言 实现方案 docx文件实现前端预览 代码实现 实现效果 pdf实现前端预览 代码实现 实现效果 excel实现前端预览 代码实现 实现效果 pptx的前端预览 实现效果 总结 前言 因为业务需要,很多文件需要在前端实现预览,今天就来了解一下吧. 可以点击下面地址体验喔 git仓库地址以及在线demo地址 实现方案 找了网上的实现方案,效果看起来不错,放在下面的表格里,里面有一些是可以直接通过npm在vue中引入使用. 文档格式 老的开源组件 替代开源组件 word(docx) mam

  • JavaScript实现导入导出excel的示例代码

    目录 Excel导入 html代码 js代码 Excel导出 html代码 js代码 Excel导入 html代码 <button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} > 导入 </button> <input id="upFile" type="file" style={{

  • JS前端模拟Excel条件格式实现数据条效果

    目录 需求背景 需求分析 实现逻辑 完整代码实现 template 部分 style 部分 script 部分 最终实现效果 需求背景 最近业务中遇到一个有意思的需求,是要在现有的表格中实现类似 Excel 中的数据条的效果,在数据比较多的时候单纯看表格里的数字会比较密集且不容易对比,加上数据条之后就比较明显的看出数据的对比情况,也让表格看起来生动了一些,这算是融合了表格和柱状图的优点. 先来看下 Excel 的效果 下面记录下实现过程和原理. 需求分析 通过图片可以看出共有几种情况: 只有正值

  • JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法

    目录 设置 JavaScript 电子表格项目 添加 Excel 导入代码 将数据添加到导入的 Excel 文件 添加迷你图 添加 Excel 导出代码 JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话“凡是能用JavaScript实现的东西,最后都会用JavaScript实现”.Excel 电子表格自 1980 年代以来一直为各行业所广泛使用,至今已拥有超过3亿用户,大多数人都熟悉 Exc

  • Java中利用POI优雅的导出Excel文件详解

    前言 故事是这样开始的: 公司给排了几天的工期,让完成 2 个功能模块的开发.其中有一个场景是这样的,从 Excel 导入数据,要求数据不能重复.用户可以下载导入失败的 Excel 文件. 这样就有 2 种实现 将失败数据存储数据库,需要下载时生成 Excel 下载即可 将失败数据生成 Excel 文件存储文件服务器,然后返回下载链接. 老大要求按方案二进行.好吧,导出 Excel 是再常见不过的功能了,然而总是觉得以前写的不够优雅,所以决定进行简单的封装,以适应简单场景的 Excel 导出.

  • Java实现导入导出Excel文件的方法（poi，jxl）

    目前,比较常用的实现Java导入.导出Excel的技术有两种Jakarta POI和Java Excel直接上代码: 一,POI POI是apache的项目,可对微软的Word,Excel,Ppt进行操作,包括office2003和2007,Excl2003和2007.poi现在一直有更新.所以现在主流使用POI. xls: pom: <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi

  • JSP导出Excel文件的方法

    本文实例讲述了JSP导出Excel文件的方法.分享给大家供大家参考,具体如下: <%@page import="jxl.Workbook,com.ecc.emp.core.*,com.ecc.emp.data.*,com.ecc.emp.jdbc.ConnectionManager,jxl.format.VerticalAlignment,java.sql.*,jxl.write.*,jxl.format.UnderlineStyle,javax.sql.DataSource"%

  • Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】

    本文实例讲述了Yii框架使用PHPExcel导出Excel文件的方法.分享给大家供大家参考,具体如下: 最近在研究PHP的Yii框架,很喜欢,碰到导出Excel的问题,研究了一下,就有了下面的方法: 1.首先在config\main.php中添加对PHPExcel的引用,我的方式是这样: // autoloading model and component classes 'import'=>array( /*'application.modules.srbac.controllers.SBas

  • C# Winform实现导入和导出Excel文件

    本文实例为大家分享了Winform实现导入导出Excel文件的具体代码,供大家参考,具体内容如下 /// <summary> /// 导出Excel文件 /// </summary> /// /// <param name="dataSet"></param> /// <param name="dataTable">数据集</param> /// <param name="isS

  • Navicat快速导入和导出sql文件的方法

    Navicat快速导入和导出sql文件的方法

    Navicat是一套快速.可靠并价格相当便宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小企业的需要.Navicat 是以直觉化的图形用户界面而建的,让你可以以安全并且简单的方式创建.组织.访问并共用信息. 1.导入SQL文件 选择我们需要导入的数据库,右击选择Execute SQL File,就是执行SQL文件. 然后选择需要导入的SQL文件,点击start进行导入即可,导入完成后点击Close,会发现表和数据都已经导入好了. 2.导出S

  • Jsp中的table多表头导出excel文件具体实现

    首先引入两份JS:copyhtmltoexcel.js以及 tableToExcel.js 复制代码 代码如下: /*  * 默认转换实现函数,如果需要其他功能,需自行扩展 * 参数: *      tableID : HTML中Table对象id属性值 * 详细用法参见以下 TableToExcel 对象定义   */function saveAsExcel(tableID){ var tb = new TableToExcel(tableID);  tb.setFontStyle("Cour

  • Vue前端导出Excel文件的详细实现方案

    Vue前端导出Excel文件的详细实现方案

    目录 一.技术选型 二.技术实现 使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式 基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法 三.参考资料 总结 一.技术选型 1.使用 vue-json-excel 插件实现 优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器

  • Aspose.Cells组件导出excel文件

    本文实例为大家分享了Aspose.Cells导出excel文件的方法,供大家参考,具体内容如下 /// <summary> /// 导出数据到本地 /// </summary> /// <param name="dt">要导出的数据</param> /// <param name="tableName">导出名称</param> /// <param name="tableTit

随机推荐