VUE 3 组件开发实战 – 在线电子表格文档编辑（二）

        在上篇文章中我们介绍了：vue3新功能、vite工具、如何初始化一个vite项目，有兴趣的同学可以了解下。
        SpreadJS作为一款原生JavaScript控件，并且符合UMD规范，所以任何框架和场景下都可以使用。目前SpreadJS针对VUE 2已经提供了组件封装，还未对VUE3提供组件封装，不过我们可以通过自己封装SpreadJS组件和设计器组件的方式，将其集成在vue3项目中。
        本文就来带领大家来学习如何将designer集成在vue3项目中。
        设计思路：创建SpreadSheet和Designer两个组件，切换路由显示不同组件。在设计器组件的工具栏中增加“加载”和“更新”两个按钮。点击“加载”即可加载从服务器获取的Excel文件，在设计器中对该组件做一些修改，点击“更新”按钮，即可将修改后的文件传递给服务器。切换路由显示SpreadSheet组件，在该组件添加 “加载”和“更新”两个button，功能同上。
        在上篇文章中已经创建了一个vue3项目，我们先来安装需要的模块。

1. "dependencies": {
   
2.     "@fortawesome/fontawesome-free": "^5.14.0",
   
3.     "@grapecity/spread-excelio": "14.0.1",
   
4.     "@grapecity/spread-sheets": "14.0.1",
   
5.     "@grapecity/spread-sheets-barcode": "14.0.1",
   
6.     "@grapecity/spread-sheets-charts": "14.0.1",
   
7.     "@grapecity/spread-sheets-designer": "14.0.1",
   
8.     "@grapecity/spread-sheets-designer-resources-cn": "14.0.1",
   
9.     "@grapecity/spread-sheets-designer-vue": "14.0.1",
   
10.     "@grapecity/spread-sheets-languagepackages": "14.0.1",
    
11.     "@grapecity/spread-sheets-pdf": "14.0.1",
    
12.     "@grapecity/spread-sheets-pivot-addon": "14.0.1",
    
13.     "@grapecity/spread-sheets-print": "14.0.1",
    
14.     "@grapecity/spread-sheets-resources-zh": "14.0.1",
    
15.     "@grapecity/spread-sheets-shapes": "14.0.1",
    
16.     "@grapecity/spread-sheets-vue": "14.0.1",
    
17.     "axios": "^0.21.0",
    
18.     "vue": "^3.0.2",
    
19.     "vue-router": "^4.0.0-rc.5"
    
20.   },

复制代码

       运行命令  npm install 来安装所有依赖项目。
        接下来我们来配置路由。
        1、在src文件夹下添加3个文件。
                 router/index.js
                 views/SpreadSheet.vue
                 views/Designer.vue
        2、进行路由的配置

1. import { createRouter, createWebHistory } from "vue-router";
   
2. 
   
3. const routes = [
   
4.   {
   
5.     path: "/",
   
6.     name: "Designer",
   
7.     component: () => import("../views/Designer.vue"),
   
8.   },
   
9.   {
   
10.     path: "/spreadSheet",
    
11.     name: "SpreadSheet",
    
12.     component: () => import("../views/SpreadSheet.vue"),
    
13.   }
    
14. ];
    
15. 
    
16. export const router = createRouter({
    
17.   history: createWebHistory(),
    
18.   routes:routes
    
19. });

复制代码

       3、在main.js引入

1. import { createApp } from 'vue'
   
2. import { router } from './router/index'
   
3. import App from './App.vue'
   
4. import './index.css'
   
5. 
   
6. const app = createApp(App)
   
7. app.use(router);
   
8. app.mount('#app')

复制代码

        4、修改App.vue

1. <template>
   
2. <div id="app">
   
3.     <div>
   
4.         <router-link to="/">Designer</router-link> |
   
5.         <router-link to="/spreadSheet">SpreadSheet</router-link>
   
6.     </div>
   
7.   <router-view/>
   
8. </div>
   
9. </template>
   
10. 
    
11. <script>
    
12. export default {
    
13.   name: 'App',
    
14.   components: {
    
15.   },
    
16.   setup(){
    
17.   }
    
18. }
    
19. </script>

复制代码

       看到这里大家应该会发现，路由的配置以及 main.js 引入的方式较vue2有所不同了。简而言之，Vue Router的Vue3版本的主要区别在于我们必须导入新方法才能使代码正常工作。其中最重要的是createRouter 和 createWebHistory。总体来说，它仍然与vue2非常相似，但是通过这些更改，可以更好的支持Typescript和进行优化。
        在main.js文件中，我们将Vue Router文件添加在项目中。在Vue2，导入它并Vue.use(router) ，但在vue3中添加方式发生了变化。如上面截图所示，vue3是使用createApp方法来实际创建项目的，在挂载应用程序前，需要通过 app.use(router)  来添加到项目中。
        配置完路由之后，我们开始编写designer组件。
        在components文件夹下添加2个文件。
               components/Designer.vue
               components /SpreadSheet.vue

        在Designer.vue中集成组件版设计器，代码如下所示：

1. <template>
   
2.   <div>
   
3.       <div ref="ssDesigner" style="height:700px;width:100%;text-align: left;"></div>
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. 
   
9. import { onMounted, ref} from "vue";
   
10. import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
    
11. import "../../node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    
12. import "@grapecity/spread-sheets-designer-resources-cn";
    
13. import "@grapecity/spread-sheets-designer";
    
14. import GC from '@grapecity/spread-sheets'
    
15. import ExcelIO from '@grapecity/spread-excelio'
    
16. 
    
17. export default {
    
18.   name: 'Designer',
    
19.   props: {
    
20.   },
    
21.   setup(props, {emit}) {
    
22.     const ssDesigner = ref(null);
    
23.     onMounted(() => {
    
24.       var designer = new GC.Spread.Sheets.Designer.Designer(ssDesigner.value);
    
25.       emit("designerInitialized", designer);
    
26.     });
    
27.     return {
    
28.       ssDesigner
    
29.     };
    
30.   }
    
31. }
    
32. </script>

复制代码

       1、在模板中添加一个div，这个div就是设计器的容器，可以通过css设置容器的宽高位置等，也就是自定义了设计器的显示大小及位置。
        2、导入设计器所需要的依赖。
        3、在setup函数中新建一个设计器，具体代码如上。


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

1. import Designer from '../components/Designer.vue'
   
2. import {ref} from "vue"
   
3. import axios from "axios"
   
4. import GC from '@grapecity/spread-sheets'
   
5. import ExcelIO from '@grapecity/spread-excelio'

复制代码

       在模板中使用该组件标签

1. <template>
   
2.   <div>
   
3.     <Designer v-on:designerInitialized="designerInitialized"></Designer>
   
4.   </div>
   
5. </template>

复制代码

      然后就可以在setup函数中来初始化设计器了

1. let designer = undefined;
   
2. let designerInitialized=(wb)=>{
   
3.       designer = wb;
   
4.       let spread = designer.getWorkbook();
   
5.     }

复制代码

       这时页面就可以显示设计器了，说明我们已经成功将设计器集成在项目中了。
        那么如何自定义设计器的工具栏呢？接下来我们在工具栏中新建 “加载”和“更新”两个按钮，为大家做个示例。
        SpreadJS 组件版设计器采用了全新可配置设计，任何区域都采取json config 的配置方式。通过修改默认的GC.Spread.Sheets.Designer.DefaultConfig，可以达到自定制功能。
        1. 增加新Ribbon 选项卡
        在浏览器Console中输入GC.Spread.Sheets.Designer.DefaultConfig即可查看默认ribbon选项卡配置。参考默认配置，可以自定义操作选项卡。

1. let DefaultConfig = GC.Spread.Sheets.Designer.DefaultConfig;
   
2. let customerRibbon = {
   
3.       id: "operate",
   
4.       text: "操作",
   
5.       buttonGroups: [
   
6.       ],
   
7.     };

复制代码

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

1. let ribbonFileCommands = {
   
2.         "loadTemplateCommand": {
   
3.             iconClass: "ribbon-button-download",
   
4.             text: "加载",
   
5.             //bigButton: true,
   
6.             commandName: "loadTemplate",
   
7.             execute: load
   
8.         },
   
9.         "updateTemplateCommand": {
   
10.             iconClass: "ribbon-button-upload",
    
11.             text: "更新",
    
12.             //bigButton: true,
    
13.             commandName: "updateTemplate",
    
14.             execute: update
    
15.         }
    
16.     }

复制代码

上面代码注册了loadTemplateCommand和updateTemplateCommand两个命令，
        其中execute对应具体执行内容的function,也就是 load 和 update 方法。
        iconClass为按钮样式，可以制定按钮图片
        text为显示文字
        commandName为命令名称，需要全局唯一
        iconClass示例：

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

复制代码

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

1. let customerRibbon = {
   
2.       id: "operate",
   
3.       text: "操作",
   
4.       buttonGroups: [
   
5.         {
   
6.           label: "文件操作",
   
7.           thumbnailClass: "ribbon-thumbnail-spreadsettings",
   
8.           commandGroup: {
   
9.             children: [
   
10.               {
    
11.                 direction: "vertical",
    
12.                 commands: ["loadTemplateCommand", "updateTemplateCommand"],
    
13.               }
    
14.             ],
    
15.           },
    
16.         },
    
17.       ],
    
18.     };

复制代码

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

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

复制代码

      最后不要忘了补充Load方法和update方法中的代码。
       Load方法执行excel文件的加载，接收到后台传递的json数据后，即使用fromJSON方法加载该文件。代码如下：

1. let load = (e)=>{
   
2.         let spread = designer.getWorkbook();
   
3.         let formData = new FormData();
   
4.         formData.append("fileName", "path");
   
5.         axios.post('spread/loadTemplate', formData, {
   
6.             responseType: "json",
   
7.         }).then((response) => {
   
8.             if(response) {
   
9.                 alert("加载成功");
   
10.                 templateJSON = response.data;
    
11.                 spread.fromJSON(templateJSON);
    
12.             }
    
13.         }).catch((response) => {
    
14.             alert("错误");
    
15.         })
    
16.     }

复制代码

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

1. let update = (e)=>{
   
2.         let spread = designer.getWorkbook();
   
3.         let spreadJSON = JSON.stringify(spread.toJSON());
   
4.         let formData = new FormData();
   
5.         formData.append("jsonString", spreadJSON);
   
6.         formData.append("fileName", "fileName");
   
7.         axios.post('spread/updateTemplate', formData).then((response) => {
   
8.             if(response) {
   
9.                 alert("更新成功");
   
10.             }
    
11.         }).catch((response) => {
    
12.             alert("错误");
    
13.         })
    
14.     }

复制代码

现在，新建的按钮就可以工作了。如下图所示，点击工具栏加载按钮，文件已在设计器成功加载。


在下篇文章将带领大家学习 如何将SpreadJS集成在此项目 中。
附件为前后端示例代码，大家可以参考下。