通过

将 SpreadJS 与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. 在main.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：

在main.js文件中，将 Vue Router 文件添加到项目中（在Vue 2 中，导入它使用的是 Vue.use(router) ，但在Vue 3中添加方式发生了变化）。如下面的截图所示，Vue 3是使用createApp方法来实际创建项目的，在挂载应用程序前，需要通过 app.use(router) 来添加到项目中。

<template> <div id="app"> <div>  <router-link to="/">Designer</router-link> |  <router-link to="/spreadSheet">SpreadSheet</router-link> </div> <router-view/> </div> </template> <script> export default{ name: 'App', components: { }, setup(){ } } </script>  

看到这里大家应该会发现，Vite中的路由配置以及 main.js 引入的方式较Vue 2有所不同，为了让其更好的支持Typescript，Vue Router的Vue 3版本要求我们必须导入新方法才能使代码正常工作，其中最重要的是createRouter 和 createWebHistory。

5. 集成designer组件

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

• components/Designer.vue
• components /SpreadSheet.vue

<template> <div><div ref="ssDesigner" 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 "../../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 }; } } </script>  

第三步，在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'  

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

<template> <div>      <Designer v-on:designerInitialized="designerInitialized"></Designer> </div> </template>  

let designer = undefined;  let designerInitialized=(wb)=>{   designer = wb;     let spread = designer.getWorkbook();   }  

1. 定制 Ribbon 选项卡

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

let DefaultConfig = GC.Spread.Sheets.Designer.DefaultConfig;  let customerRibbon ={   id: "operate",ext: "操作",   buttonGroups: [   ], };  

2、自定义按钮

在定义按钮之前，需要先定义按钮点击时的命令Commands，并将命令注册到config的commandMap属性上。

let ribbonFileCommands = {  "loadTemplateCommand": {      iconClass: "ribbon-button-download",      text: "加载",              //bigButton: true,      commandName: "loadTemplate",      execute: load  },  "updateTemplateCommand":{      iconClass: "ribbon-button-upload",      text: "更新",      //bigButton: true,      commandName: "updateTemplate",      execute: update     } }  

上面的示例代码注册了 loadTemplateCommand和 updateTemplateCommand 两个命令。

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

iconClass示例代码：

.ribbon-button-download {      background-image: url(图片地址，可以是base64 svg)}；  

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

let customerRibbon ={        id: "operate",text: "操作",buttonGroups: [  {    label: "文件操作",    thumbnailClass: "ribbon-thumbnail-spreadsettings",       commandGroup: {      children: [        {          direction: "vertical",          commands: ["loadTemplateCommand", "updateTemplateCommand"],        }      ],       },     },     ], };  

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

DefaultConfig.ribbon.push(customerRibbon); DefaultConfig.commandMap = {}; Object.assign(DefaultConfig.commandMap, ribbonFileCommands);  

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

Load方法和update方法的作用

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

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("加载成功");          templateJSON = response.data;          spread.fromJSON(templateJSON);      }          }).catch((response) => {              alert("错误");  })  }  

let update = (e)=>{  let spread = designer.getWorkbook();  let spreadJSON = JSON.stringify(spread.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("错误");       })      }  

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

标签：