Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（功能拓展）

本章，我将带领大家继续扩展 Vue 3 这个项目原型，实现数据绑定、模板文件导入/更新/导出和数据透视表等功能，本章的实现思路与上一篇（组件集成）基本类似。

发布于 2021/01/04 20:10

SpreadJS

通过环境搭建和组件集成，我们学会使用 Vite 和 SpreadJS ，将在线Excel的编辑功能集成在Vue 3项目中。

本章，我将带领大家继续扩展 Vue 3 这个项目原型，实现数据绑定、模板文件导入/更新/导出和数据透视表等功能，本章的实现思路与上一篇（组件集成）基本类似。

设计思路

  • 同时创建SpreadJS和Designer（表格编辑器）两个组件，用切换路由的方式显示不同组件类型。

  • 在编辑器组件的工具栏中增加“加载”和“更新”两个按钮。

  • 点击“加载”即可加载从服务器获取的Excel文件，在编辑器中对该组件做一些修改，点击“更新”按钮，将修改后的文件传递给服务器。

  • 切换路由显示 SpreadJS 组件，在该组件添加“加载”和“更新”两个button，功能同上。

SpreadJS 组件介绍

SpreadJS是一款基于 HTML5 的原生JavaScript组件，兼容 450 种以上的 Excel 公式，提供高度类似 Excel 的功能，主要用于开发 Web Excel 组件，实现多人协同编辑、高性能模板设计和数据填报等功能模块，组件架构符合UMD规范，可以以原生的方式嵌入各类应用，并与前后端技术框架相结合。


集成 SpreadJS 组件

首先在components/ SpreadSheet.vue中集成SpreadJS，代码如下图所示：

<template>
  <div>
    <div ref="ssHost" style="height:700px;width:100%;text-align: left;"></div>
  </div>
</template>

<script>
import { onMounted, ref} from "vue";
import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import GC from "@grapecity/spread-sheets"

export default {
  name: 'SpreadSheets',
  props: {
  },
  setup(props, {emit}) {
    const ssHost = ref(null);
    onMounted(() => {
      var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
      emit("workbookInitialized", workbook)
    });
    return {
      ssHost
    };
  }
}
</script>

具备步骤如下：

  1. 在模板中添加一个div，这个div就是spread的容器，可以通过css设置容器的宽高位置等，也就是自定义了spread的显示大小及位置。

  2. 导入此组件所需要的依赖。

  3. 在setup方法中新建一个spread。

  4. 在views/ SpreadSheet.vue中引入该组件及相关依赖。

    import SpreadSheets from '../components/SpreadSheets.vue'
import {ref} from "vue"
import axios from "axios"
import GC from '@grapecity/spread-sheets'
import ExcelIO from '@grapecity/spread-excelio'

  5. 在模板中使用该组件标签

    <template>
<div>
    <button @click="load($event)">加载</button>
    <button @click="update($event)">更新</button>
    <SpreadSheets v-on:workbookInitialized="workbookInitialized"></SpreadSheets>
</div>
</template>

  6. 在setup函数中初始化spread。

    let workbook = undefined;
let workbookInitialized=(wb)=>{
    workbook = wb
    }

功能扩展：Excel 文档导入/更新/导出

Excel 文档的导入/更新/导出功能可通过自定义“加载”、“更新”和“导出”按钮实现，在SpreadSheet组件中添加自定义按钮的思路，与上篇designer组件的设计思路一致：

  • Load方法执行excel文件的加载，接收到后台传递的json数据后，即使用fromJSON方法加载该文件。

let load = (e)=>{
        let formData = new FormData();
        formData.append("fileName", "path");
        axios.post('spread/loadTemplate', formData, {
            responseType: "json",
        }).then((response) => {
            if(response) {
                alert("加载成功");
                templateJSON = response.data;
                workbook.fromJSON(templateJSON);
            }
        }).catch((response) => {
            alert("错误");
        })
    }

  • Update执行文件的更新。在设计器对加载的文件做些操作，如修改背景色、添加文本等，使用toJSON方法当前spread保存为json数据传递给后台存储。

let update = (e)=>{
        let spreadJSON = JSON.stringify(workbook.toJSON());
        let formData = new FormData();
        formData.append("jsonString", spreadJSON);
        formData.append("fileName", "fileName");
        axios.post('spread/updateTemplate', formData).then((response) => {
            if(response) {
                alert("更新成功");
            }
        }).catch((response) => {
            alert("错误");
        })
    }

  • Save方法执行将spread json导出为excel文件。

    //export SpreadJS json to excel file
    excelio.save(json, function (blob) {
        //do whatever you want with blob
        //such as you can save it
    }, function (e) {
        //process error
        console.log(e);
    });

功能扩展：数据透视表

SpreadJS内置了数据透视表功能，通过将其集成到项目中，便可以使用数据透视表，该表支持排序、过滤等条件格式，可以按不同维度分析数据，并且可以自定义主题。

SpreadJS 的数据透视表支持两种格式的数据源:

  • table name: 数据透视表使用一个表格的名字去获取数据源。

  • range formula: 数据透视表使用工作表的一个范围公式获取数据，这个范围公式必须是工作表的绝对路径。

若使用数据透视表，需要添加如下链接到文档的开始部分：

    <head>
       ...
       <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
       <script src='.../spreadjs/plugins/gc.spread.pivot.x.x.x.min.js' type='text/javascript'></script>
    </head>

使用一个表格的名称去创建数据透视表：

    let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
    let sheet1 = spread.getSheet(0);
    let sheet2 = spread.getSheet(1);
    sheet1.setRowCount(250);
    let table = sheet.tables.add('table1', 0, 0, 200, 200);
    sheet1.setArray(0, 0, pivotSales);
    let pivotTable = sheet2.pivotTables.add("PivotTable", "table1", 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);

也可使用工作表的一个范围公式创建数据透视表：

let range = "=Sheet2!A1:D4";
let pivotTable = sheet2.pivotTables.add("PivotTable", range, 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);

通过切换路由可以看到 SpreadJS 与在线表格编辑器可以正常切换显示。在编辑器中修改加载的Excel文件，点击工具栏“更新”按钮，再切换至SpreadJS组件，点击“加载”按钮便可以看到刚才所修改的文件已被更新。


示例代码

以上就是在Vue 3中集成SpreadJS与在线表格编辑器的全部内容，除了 Vue ，SpreadJS 还可以原生的方式嵌入各类应用（桌面软件、app、web），并与各类前后端技术框架（java、.NET、JavaScript、Vue、React 等）相结合。

通过集成 SpreadJS ，开发者可研发出高性能的公式计算、在线导入导出 Excel 文档、数据透视表和可视化分析功能，为系统使用者提供灵活易用的用户体验。

扩展阅读

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

如下资源列表，可以为您评估产品提供帮助：

热门博客分类
ComponentOne Enterprise SpreadJS ActiveReports 活字格 Wyn 商业智能 WijmoJS GcExcel 行业动态 ActiveReportsJS Spread .NET
相关产品

SpreadJS

可嵌入您系统的在线Excel的纯前端表格控件

免费试用 产品详情
推荐相关案例
京东物流 - 表格技术在物流行业的敏捷应用实践

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

网易 - 灵犀办公文档

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

用友 - 畅捷通 - 财务T-UFO报表

由畅捷通推出的财务T-UFO报表，是用友T+Cloud的两大功能模块之一，提供类Excel风格，用于制定个性化报表，并支持自定义取数，借助该报表，财务人员可按部门、个人、往来单位、存货、项目设置辅助核算，实现“人财货客”全链条闭环。

航天信息软件 - 智慧统计平台

由航天信息软件研发的智慧统计平台，基于某统计局的报表填报系统项目而开发的，通过嵌入纯前端表格控件 SpreadJS，该平台实现了在线报表设计及分析功能，通过拖拽元数据（指标）可以快速设计各类报表样式，实现表内、表间审核公式和表内、表间计算公式等。

立信会计师事务所：借助表格技术提升智能审计云平台应用体验

立信会计师事务所（特殊普通合伙）（简称“立信”）于 1927 年在上海创建，是中国建立最早和最有影响的会计师事务所之一。智能审计云平台（SACP）是立信自主研发的行业内第一款按风险导向审计模式要求，以重大报错风险识别、评估和应对作为工作主线，以数据为基础、以数据挖掘为核心、以数据共享为纽带，着眼于数据、立足于数据、集成大数据接口、以数据驱动审计计划的完全基于云的智慧型智能审计系统。

查看更多精彩案例
推荐相关资源
《精算与金融行业场景及技术应用》

本白皮书旨在深入探讨精算学在风险管理和财务分析两个关键领域中的应用。重点介绍如何利用类Excel纯前端表格技术进行数据分析和计算的有效性。通过精确的数据处理和准确的数值模型，帮助金融业企业提高运行效率、加强风险管理，增强公司的决策能力和竞争力。

2023 葡萄城表格技术产品及应用白皮书

葡萄城基于40余年的专业控件技术积累和在电子表格应用领域的经验，推出《2023 葡萄城表格技术产品及应用白皮书》，通过本资料您可以详细了解到葡萄城表格产品的核心技术优势，领略典型应用场景与实践案例，还可获取丰富的技术资源。

LIMS数字化系统方案白皮书

本白皮书旨在分享B/S架构下LIMS系统在数据填报、数据分析和生成报告等场景中的技术痛点及解决方案，帮助企业提升运行效能、质量管理水平，增强竞争力和科研能力。通过引入数字化系统，实验室能够实现更高效的管理和更准确的数据分析，为实验室的发展和创新提供了有力支持。

《全面预算编制场景及技术应用》

本白皮书旨在深入探讨类Excel控件在全面预算编制中的应用，重点介绍如何借助类Excel控件在业务预算和财务预算场景中进行数据的填报和分析。通过提高预算编制的效率和准确性，帮助企业更好地理解和传达预算信息，增强公司的决策能力和竞争力。

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

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

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

葡萄城热门产品

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