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

收藏

本帖最后由 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项目，我们先来安装需要的模块。

"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"
},

复制代码

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

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

<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>

复制代码

   看到这里大家应该会发现，路由的配置以及 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中集成组件版设计器，代码如下所示：

<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>

复制代码

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

      在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>

复制代码

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

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

复制代码

   这时页面就可以显示设计器了，说明我们已经成功将设计器集成在项目中了。
      那么如何自定义设计器的工具栏呢？接下来我们在工具栏中新建 “加载”和“更新”两个按钮，为大家做个示例。
      SpreadJS 组件版设计器采用了全新可配置设计，任何区域都采取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: [
],
};

复制代码

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方法执行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("错误");
})
}

复制代码

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

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("错误");
})
}

复制代码

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

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

		自动登录	找回密码
密码			立即注册

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人