百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

Vue 3 组件开发(三):搭建表格编辑系统 - 功能拓展

liuian 2024-12-26 15:05 75 浏览

通过环境搭建和组件集成，我们学会使用 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 文档、数据透视表和可视化分析功能，为系统使用者提供灵活易用的用户体验。

欢迎点击下方“了解更多”获取更多技术详情。

相关推荐

扫描仪怎么安装（信鸽扫描仪怎么安装）

扫描仪的安装步骤可能会略有不同，具体取决于您所使用的扫描仪品牌和型号。一般而言，您可以按照以下基本步骤来安装扫描仪：确认您的计算机系统符合扫描仪的最低系统要求。在计算机上插入扫描仪的安装光盘，或从制造...

u盘怎么启动重装系统（u盘启动重装系统哪个好）

1.下载好系统之家U盘以后在电脑上插入U盘并打开软件，软件会自，动配置用户的电脑信息，点击制作U盘启动盘。2.接着就进入了选择系统的界面，在这里选择需要安装的系统版本，然后点击开始制作。3.弹出提示窗...

photoshopcs6哪一年的（pscs6版本好用吗）

pscs6的发行时间是2012年4月24日，该软件是是AdobePhotoshop的第13代，具有多种功能，包括内容识别修补、Mercury图形引擎/3D性能提升/3D控制功能/改良的设计工具/全新的...

电脑如何设置自动关机win10（win10系统电脑怎么设置自动关机）

windows10自动关机设置方法如下1、打开电脑管家主界面，点击右下角的“工具箱”;2、在工具箱的其他分类中选择打开“健康小助手”;3、健康小助手中有三项功能，护眼配色、定时休息和定时关机，点击定时...

wan口未连接是欠费吗（wan口未连接是怎么回事）

网费欠费了路由器WAN指示灯常亮不闪烁，一个灯亮。路由器正常工作的话，电源指示灯是常亮状态，SYS系统指示灯和WAN指示灯会闪亮，尤其是WAN指示灯的状态有些复杂：如果WAN指示灯不亮，说明网络连接有...

如何用手机修复sd卡（如何用手机修复sd卡受损）

第一步：将要修复的内存卡，用读卡器连接到电脑上，然后下载失易得数据恢复软件。    第二步：运行软件，选择要恢复的“u盘/储存卡”功能。注：在恢复数据之...

惠普台式机bios设置（惠普台式机bios设置核显内存）

1、按电源键启动电脑，在屏幕刚亮时，不停点击F10按键，就可以进入BIOS界面；2、如果F10没反应，则在启动时不停点击ESC键；3、这个时候会进入到启动菜单选项，F10BIOSSetup就是BI...

搜狗输入法不见了怎么调出来

因为在设置里勾选了智能ABC风格，所以他会像智能ABC一样，按空格才会显示。右键点击搜狗皮肤，设置属性，勾选搜狗风格就好了。注意，当你勾选智能ABC风格的时候会自动勾选“按空格出字”。使用【ctrl...

类似系统的黑科技网吧（系统的黑科技网吧好看吗）

如果机器配置和装修都不追求高档的话应该差不多只要不是全部追求顶配基本上可以

输入法哪个好用占内存又小（哪种输入法占内存小）

最不占内存的是系统自带的输入法，不过只适合win8用户，对于win7和xp用户推荐qq输入法，不推荐搜狗（1，安装包就可以看出占用系统大小，2，各种后台运行，3，各种广告提醒），除了qq推荐谷歌输入法...

2025组装机推荐配置（21年装机配置）

1.CPU：Intel酷睿i5-10400F；2.主板：华硕H410M-K；3.内存：金士顿16GBDDR42666MHz；4.硬盘：希捷Barracuda1TB7200转；5.显卡...

怎么恢复已经删除的人（怎么恢复已经删了的好友）
怎么恢复已经删除的人（怎么恢复已经删了的好友）

我们总是把美好的人和事进行拍照留念，手机相册中的照片越来越多，占用的空间也随之越来越大，如果在定期清理照片时误删了重要的照片，又该通过什么办法找回来呢?一、从手机最近删除中恢复手机照片删除之后，有两种方法可以找回，第一种就是手机自带的恢复功...

2026-01-01 21:55 liuian

三星手机系统下载（三星手机新版本下载）

三星手机下载系统有几种方法，其中最常见的方法是通过手机的设置菜单来下载系统更新。用户可以进入手机的设置菜单，找到“关于手机”或“软件更新”选项，然后点击“检查更新”来查看是否有可用的系统更新。如果有更...

安装系统要在u盘下载什么（安装系统对u盘要求）

、U盘装系统分两种，一种是pe启动盘，一种是使用制作工具直接将系统刻录到U盘2、系统镜像也分很多种，ghost系统镜像有iso和gho两种，原版系统镜像有iso和wim两种3、如果是大白菜pe启动...

原版win7家庭版（win7家庭版怎么样）

同配置下的流畅度Win7家庭普通版》家庭高级版》专业版》旗舰版各版本的的功能存在差异，功能越少运行越流畅，因为后台进程较少。办公的话建议专业版起步，游戏的话就无所谓了。网上有一些精简版，跑起来贼流畅...

一周热门
最近发表
标签列表