如何使用 JavaScript 导入和导出 Excel

在现代的Web应用开发中，与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析，与Excel文件的交互都扮演着至关重要的角色。本文将为大家介绍如何在熟悉的电子表格 UI 中轻松导入 Excel 文件，并以编程方式修改表格或允许用户进行编辑，最后使用葡萄城公司的纯前端表格控件SpreadJS组件将它们导出回 Excel 文件。

发布于 2024/03/18 15:04

前言

在现代的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>
    <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的全过程，如果您想了解更多的信息，欢迎点击这篇参考资料查看。

关于葡萄城

葡萄城软件是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

热门博客分类
ComponentOne Enterprise SpreadJS ActiveReports 活字格 Wyn 商业智能 WijmoJS GcExcel ActiveReportsJS
推荐相关案例
京东物流 - 表格技术在物流行业的敏捷应用实践

物流大促期间出库单量积压场景下，不同仓的生产操作人员需要在统一数据源基础上进行基于自身仓情况的个性化查询分析，从而能够实时监控客单情况，防止积压。要想实现这样的功能，对数据分析平台的要求就非常高。在引入SpreadJS之后，Udata平台可以为客户提供更高效的数据查询方案。

网易 - 灵犀办公文档

为了在前端解析Excel文档，实现多人在线协同编辑，灵犀文档的数据集处理模块完全基于葡萄城的纯前端表格控件SpreadJS进行开发。通过嵌入SpreadJS，文档系统完美复刻了Excel的UI架构，并有效提升了系统多人协作和数据处理效率。

中联教育 - 嵌入式BI助力财经数据分析服务

通过与Wyn 商业智能的深度集成，实现了各个考场、考试场次、学生考试数据的隔离与考试平台数据集成，实现了考生自动授权登录、考试计划的制定，并能够进行在线大数据分析学习、实训、考试。

上海市政 - Wyn助力打造智慧道路交通数字孪生平台

在智慧道路交通平台的开发过程中，Wyn可以媲美一些数据中台产品，可以说就是一个小数据中台。不但能够实现数据的可视化，同时也具备数据多源融合分析的能力。

北京筑龙 - 为企业打造非凡数字化采购体验

北京筑龙已经将Wyn商业智能成功的应用于采购供应链相关服务及产品中，直观快速地解决了数据分析的需求。

查看更多精彩案例
推荐相关资源
《企业级低代码技术及应用白皮书》

在当今数字化时代，企业面临着前所未有的机遇和挑战。随着技术的不断进步和市场竞争的加剧，企业需要以更快的速度来适应变革、提供创新的解决方案。在此背景下，低代码技术崭露头角，凭借其低门槛、高效率的特性备受用户青睐，逐步成为数字化转型的重要驱动力。

《工程项目管理信息化低代码技术应用实践白皮书》

随着工程行业规模的不断扩大，市场竞争也变得更加激烈，利润空间逐步缩小，承包商面临的风险不断增加。在此背景下，工程企业必须增强内部发展动力，采用新技术、新方法和新模式来提升项目的综合管理水平。低代码技术的出现，为工程项目管理应用的高效落地带来新的机遇。

《低代码助力中小企业精益数字化转型白皮书》

在数字化转型方面，中小企业面临着不少挑战。在国家明确提出要促进数字经济发展、加强数字中国建设、完善数字经济治理的大背景下，企业数字化需求呈现井喷状态，而从市场上下游需求来看，大型企业数字化应用的完善对供应链管理提出了更高的要求，推动了中小企业配合数字化业务的需求。

铁路行业数字化应用建设方案白皮书

铁路行业数字化转型是一项复杂的系统工程，涉及业务流程优化、信息系统升级、数据资源整合等多方面内容。面对铁路业务需求多样化、业务变化快、个性化需求强等特点，传统的信息化建设模式已难以适应新形势下铁路高质量发展的要求。同时，铁路行业现有的信息系统存在数据分散、数据孤岛、分析能力不足、IT人才匮乏等诸多问题，这些因素都制约着铁路数字化转型的进程。 本白皮书以铁路数字化应用建设为主题，系统梳理了铁路行业数字化转型的现状与趋势，深入分析了铁路行业数字化应用建设面临的机遇和挑战。针对存在的主要问题，白皮书提出了一套切实可行的解决方案：一是利用低代码技术高效构建自主可控的数字化应用，匹配铁路行业个性化需求；二是打破数据壁垒，实现数字资源的统一管理和共享，促进业务系统深度融合；三是引入先进的表格技术和嵌入式BI工具，提升数据分析与价值挖掘能力。

IDC《中国低代码开发平台技术评估，2024》

在数字化转型的大潮中，低代码开发平台正成为企业快速构建和部署应用的新引擎。随着企业对敏捷开发和技术创新的需求日益增长，低代码平台的市场规模和影响力不断扩大。IDC 预测，到 2027 年，中国低代码/无代码软件市场规模将达到 106.3 亿元人民币，未来 5 年市场年复合增长率（CAGR）为32.3%。本次报告主要围绕低代码开发平台开展，IDC 定义的低代码/无代码开发平台是一种同时适用于专业开发人员和非 IT 开发人员的数字化开发平台，它通常提供可视化的开发工具、拖拽式开发界面、预构建的代码组件和模板，以及用于建模和集成流程和数据的工具，以加速和简化定制数字解决方案的设计和开发。

查看更多实用资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息，请联系我们, 随时掌握技术资源和产品动态

葡萄城热门产品

活字格
打通现有软件，快速定制面向未来的个性化应用
免费试用 产品详情
SpreadJS
可嵌入您系统的在线Excel的纯前端表格控件
免费试用 产品详情
Wyn商业智能
可与企业自有系统深度集成，增强数据分析的 BI 工具
免费试用 产品详情