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

        在上篇文章介绍了如何将组件版设计器集成在vue3项目及如何自定义设计器工具栏，本节课将带领大家将SpreadJS集成在vue3项目中,整体思路与上篇文章集成组件版设计器类似。
        首先在components/ SpreadSheet.vue中集成SpreadJS，代码如下所示：

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

复制代码

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

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

1. import SpreadSheets from '../components/SpreadSheets.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.     <button @click="load($event)">加载</button>
   
4.     <button @click="update($event)">更新</button>
   
5.     <SpreadSheets v-on:workbookInitialized="workbookInitialized"></SpreadSheets>
   
6.   </div>
   
7. </template>

复制代码

       然后就可以在setup函数中来初始化spread了。

1. let workbook = undefined;
   
2. let workbookInitialized=(wb)=>{
   
3.       workbook = wb
   
4.     }
   

复制代码

       我们在SpreadSheet组件中添加了“加载”和“更新”按钮。与上篇designer组件设计思路一致：
        Load方法执行excel文件的加载，接收到后台传递的json数据后，即使用fromJSON方法加载该文件。

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

复制代码

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

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

复制代码

       这时页面就可以显示spread了，这说明我们已经成功将SpreadJS集成在项目中了。
        最终效果如下图所示，切换路由可以看到spread与组件版设计器可以正常切换显示。在设计器中修改加载的Excel文件，点击工具栏更新按钮。切换至SpreadSheet组件，点击加载按钮可以看到已成功加载刚才所修改的文件。



        以上就是vue3项目集成SpreadJS与设计器的全部内容，完整代码请参考附件中的前后端demo。