JavaScript实现Excel导入导出与SpreadJS表格编辑实战

作者：半夏时间：2026-10-31 12:39:11浏览：266

本文详解如何在JavaScript中利用SpreadJS组件实现Excel文件的导入与导出。通过NPM安装依赖并初始化工作簿，演示了如何读取本地Excel文件、动态添加数据行、复制样式与公式，以及插入迷你图。最后介绍如何暂停重绘以提升性能，并导出修改后的Excel文件，适用于Web应用中的数据交换与报告生成场景。

前言

在现代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="external nofollow" 
      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的示例详解，更多关于JavaScript导入导出Excel的资料请关注本站其它相关文章！

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13