找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-12-1 16:08  /   查看:4897  /  回复:0
本帖最后由 Lynn.Dou 于 2022-8-10 09:16 编辑

        在上篇文章中我们介绍了: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. const routes = [
  3.   {
  4.     path: "/",
  5.     name: "Designer",
  6.     component: () => import("../views/Designer.vue"),
  7.   },
  8.   {
  9.     path: "/spreadSheet",
  10.     name: "SpreadSheet",
  11.     component: () => import("../views/SpreadSheet.vue"),
  12.   }
  13. ];

  14. export const router = createRouter({
  15.   history: createWebHistory(),
  16.   routes:routes
  17. });
复制代码
       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. const app = createApp(App)
  6. app.use(router);
  7. 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. <script>
  11. export default {
  12.   name: 'App',
  13.   components: {
  14.   },
  15.   setup(){
  16.   }
  17. }
  18. </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. <script>

  7. import { onMounted, ref} from "vue";
  8. import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
  9. import "../../node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
  10. import "@grapecity/spread-sheets-designer-resources-cn";
  11. import "@grapecity/spread-sheets-designer";
  12. import GC from '@grapecity/spread-sheets'
  13. import ExcelIO from '@grapecity/spread-excelio'

  14. export default {
  15.   name: 'Designer',
  16.   props: {
  17.   },
  18.   setup(props, {emit}) {
  19.     const ssDesigner = ref(null);
  20.     onMounted(() => {
  21.       var designer = new GC.Spread.Sheets.Designer.Designer(ssDesigner.value);
  22.       emit("designerInitialized", designer);
  23.     });
  24.     return {
  25.       ssDesigner
  26.     };
  27.   }
  28. }
  29. </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.     }
复制代码
现在,新建的按钮就可以工作了。如下图所示,点击工具栏加载按钮,文件已在设计器成功加载。
image.png769811706.png

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





vue3集成SpreadJS和designer示例demo.zip

145.37 KB, 下载次数: 222

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部