技术文章

  通过前面的学习，我们已经使用了它 Vite 搭建出了 Vue 3 项目原型。今天，我们将基于此原型进行集成 Spread 具备电子表格组件和在线编辑器组件 Excel公式计算，在线导入导出 Excel 实现在线表格编辑系统雏形的文档、数据透视表和可视化分析能力。

设计思路 同时创建 Spread 和 Designer两个组件，通过切换路由来显示不同的组件类型。 添加编辑器组件的工具栏"加载"和"更新"两个按钮。 点击"加载"从服务器获得的服务器可以加载 Excel 文件，在编辑器中修改组件，单击"更新"按钮将修改后的文件传输给服务器。 切换路由显示 Spread 在组件中添加组件 "加载"和"更新"两个button，功能同上。 Spread 组件介绍

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

  

  目前，Spread已针对Vue 2.组件封装已经完成，目前还没有完成Vue 3提供组件包装，但我们可以自己包装Spread将组件和表格编辑器集成在一起Vue 3项目中。

将 Spread 与 Vue 3 集成

  1. 安装模块

  修改package.json 添加我们需要的模块和操作命令 npm install 安装所有依赖项目。

  "dependencies": {

  "@fortawesome/fontawesome-free": "^5.14.0",

  "@grapecity/spread-excelio": "^14.0.1",

  "@grapecity/spread-sheets": "^14.0.1",

  "@grapecity/spread-sheets-barcode": "^14.0.1",

  "@grapecity/spread-sheets-charts": "^14.0.1",

  "@grapecity/spread-sheets-designer": "^14.0.1",

  "@grapecity/spread-sheets-designer-resources-cn": "^14.0.1",

  "@grapecity/spread-sheets-designer-vue": "^14.0.1",

  "@grapecity/spread-sheets-languagepackages": "^14.0.1",

  "@grapecity/spread-sheets-pdf": "^14.0.1",

  "@grapecity/spread-sheets-pivot-addon": "^14.0.1",

  "@grapecity/spread-sheets-print": "^14.0.1",

  "@grapecity/spread-sheets-resources-zh": "^14.0.1",

  "@grapecity/spread-sheets-shapes": "^14.0.1",

  "@grapecity/spread-sheets-vue": "^14.0.1",

  "axios": "^0.21.0",

  "vue": "^3.0.2",

  "vue-router": "^4.0.0-rc.5"

  },

  2. 配置路由

  在src在文件夹下添加3个文件。

router/index.js views/SpreadSheet.vue views/Designer.vue

  配置路由：

  import { createRouter, createWebHistory } from "vue-router";

  const routes = [

  {

  path: "/",

  name: "Designer",

  component: () => import("../views/Designer.vue"),

  },

  {

  path: "/spreadSheet",

  name: "SpreadSheet",

  component: () => import("../views/SpreadSheet.vue"),

  }

  ];

  export const router = createRouter({

  history: createWebHistory(),

  routes:routes

  });

  3. 在 ** in.js中引入：

  import { createApp } from 'vue'

  import { router } from './router/index'

  import App from './App.vue'

  import './index.css'

  const app = createApp(App)

  app.use(router);

  app.mount('#app')

  4. 修改App.vue：

  在 ** in.js文件中，将 Vue Router 在项目中添加文件(Vue 2 在中间，使用它进口 Vue.use(router) ，但在Vue 3.添加方法发生了变化)。如下图所示，Vue 3是使用createApp为了实际创建项目，需要通过挂载应用程序 app.use(router) 添加到项目中。

  

  

  

  Designer |

  SpreadSheet

  

  

  

  

  

  export default {

  name: 'App',

  components: {

  },

  setup(){

  }

  }

  

  看这里大家应该会发现，Vite中间的路由配置和 ** in.js 比较引入的方式Vue 不同的是，为了更好地支持它Typescript，Vue Router的Vue 3版本要求我们引入新的方法来使代码正常工作，最重要的是createRouter 和 createWebHistory。

  5. 集成designer组件

  配置路由后，可以开始集成designer组件。首先，在components在文件夹下添加两个文件：

components/Designer.vue components /SpreadSheet.vue

  接着，在 Designer.vue 中集成Spread 表格编辑器，代码如下图所示：

在模板中添加一个div，这个div是编辑器的容器，可以通过css设置容器的宽度和高度位置，即定制编辑器的显示尺寸和位置。 导入编辑器所需的依赖性。 在setup在函数中新建编辑器。

  

  

  

  

  

  

  import { onMounted, ref} from "vue";

  import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";

  import "../../node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";

  import "@grapecity/spread-sheets-designer-resources-cn";

  import "@grapecity/spread-sheets-designer";

  import GC from '@grapecity/spread-sheets'

  import ExcelIO from '@grapecity/spread-excelio'

  export default {

  name: 'Designer',

  props: {

  },

  setup(props, {emit}) {

  const ssDesigner = ref(null);

  onMounted(() => {

  var designer = new GC.Spread.Sheets.Designer.Designer(ssDesigner.value);

  emit("designerInitialized", designer);

  });

  return {

  ssDesigner

  };

  }

  }

  

  第三步，在views/Designer.vue介绍组件及相关依赖。

  import Designer from '../components/Designer.vue'

  import {ref} from "vue"

  import axios from "axios"

  import GC from '@grapecity/spread-sheets'

  import ExcelIO from '@grapecity/spread-excelio'

  第四步是在模板中使用组件标签。

  

  

  

  

  

  最后，在setup初始化编辑器在函数中。

  let designer = undefined;

  let designerInitialized=(wb)=>{

  designer = wb;

  let spread = designer.getWorkbook();

  }

  完成上述步骤后，页面可以显示编辑器UI了。

如何定制编辑器的工具栏？

  完成上述步骤后，我们将成功 Spread 编辑器集成到项目中，然后演示如何在工具栏中新建 "加载"和"更新"两个按钮。

  由于 Spread 在线表格编辑器采用全新的可配置设计，可在任何区域采用json config 配置方法。修改默认情况GC.Spread.Sheets.Designer.DefaultConfig，可实现自定制功能。

  1. 定制 Ribbon 选项卡

  在浏览器Console中输入GC.Spread.Sheets.Designer.DefaultConfig可查看默认ribbon选项卡配置。参考默认配置，可自定义选项卡。

  let DefaultConfig = GC.Spread.Sheets.Designer.DefaultConfig;

  let customerRibbon = {

  id: "operate",

  text: "操作",

  buttonGroups: [

  ],

  };

  自定义按钮

  在定义按钮之前，点击按钮时需要定义命令Com ** nds，并注册命令config的com ** ndMap属性上。

  let ribbonFileCom ** nds = {

  "loadTemplateCom ** nd": {

  iconClass: "ribbon-button-download",

  text: "加载",

  //bigButton: true,

  com ** ndName: "loadTemplate",

  execute: load

  },

  "updateTemplateCom ** nd": {

  iconClass: "ribbon-button-upload",

  text: "更新",

  //bigButton: true,

  com ** ndName: "updateTemplate",

  execute: update

  }

  }

  上述示例代码已注册 loadTemplateCom ** nd和 updateTemplateCom ** nd 两个命令。

execute对应具体执行内容function,也就是 load 和 update 方法。 iconClass为了按钮样式，可以制作按钮图片 text按钮显示文本 com ** ndName命令名称需要全局唯一

  iconClass示例代码：

  .ribbon-button-download {

  background-i ** ge: url(图片地址，可以是 svg)}；

  有了命令就可以添加对应button 的config了：

  let customerRibbon = {

  id: "operate",

  text: "操作",

  buttonGroups: [

  {

  label: "文件操作",

  thumbnailClass: "ribbon-thumbnail-spreadsettings",

  com ** ndGroup: {

  children: [

  {

  direction: "vertical",

  com ** nds: ["loadTemplateCom ** nd", "updateTemplateCom ** nd"],

  }

  ],

  },

  },

  ],

  };

  在designer的config中加入自定义的命令和按钮：

  DefaultConfig.ribbon.push(customerRibbon);

  DefaultConfig.com ** ndMap = {};

  Object.assign(DefaultConfig.com ** ndMap, ribbonFileCom ** nds);

  最后，不要忘了补充Load方法和update方法中的代码。

Load方法和update方法的作用

  Load方法用于执行excel文件的加载。在接收到后台传递的json数据后，使用fromON方法加载该文件，代码如下图：

  let load = (e)=>{

  let spread = designer.getWorkbook();

  let formData = new FormData();

  formData.append("fileName", "path");

  axios.post('spread/loadTemplate', formData, {

  responseType: "json",

  }).then((response) => {

  if(response) {

  alert("加载成功");

  templateON = response.data;

  spread.fromON(templateON);

  }

  }).catch((response) => {

  alert("错误");

  })

  }

  Update方法用于执行文件的更新。在编辑器对加载的文件做出操作，如修改背景色、添加文本时，使用toON方法将当前spread保存为json数据传递给后台存储，代码如下：

  let update = (e)=>{

  let spread = designer.getWorkbook();

  let spreadON = ON.stringify(spread.toON());

  let formData = new FormData();

  formData.append("jsonString", spreadON);

  formData.append("fileName", "fileName");

  axios.post('spread/updateTemplate', formData).then((response) => {

  if(response) {

  alert("更新成功");

  }

  }).catch((response) => {

  alert("错误");

  })

  }

  完成上述操作，新建的按钮就可以正常工作了。如下图示例，点击工具栏加载按钮，文件已在 Spread 表格编辑器成功加载。

  

  以上就是 Vue 3 组件开发：搭建基于Spread的表格编辑系统（组件集成篇）的全部内容，通过集成 Spread 电子表格组件和在线编辑器组件，我们搭建的项目原型已经具备了在线表格编辑系统的雏形。

  在下一章功能拓展篇中，我们将演示如何为这个系统雏形增加更多电子表格功能，并提供整个工程源码供参考。