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

收藏

本帖最后由 lynn512 于 2020-12-1 16:21 编辑

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

<template>
<div>
<div ref="ssHost" 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 GC from "@grapecity/spread-sheets"
export default {
name: 'SpreadSheets',
props: {
},
setup(props, {emit}) {
const ssHost = ref(null);
onMounted(() => {
var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
emit("workbookInitialized", workbook)
});
return {
ssHost
};
}
}
</script>

复制代码

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

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

import SpreadSheets from '../components/SpreadSheets.vue'
import {ref} from "vue"
import axios from "axios"
import GC from '@grapecity/spread-sheets'
import ExcelIO from '@grapecity/spread-excelio'

复制代码

在模板中使用该组件标签

<template>
<div>
<button @click="load($event)">加载</button>
<button @click="update($event)">更新</button>
<SpreadSheets v-on:workbookInitialized="workbookInitialized"></SpreadSheets>
</div>
</template>

复制代码

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

let workbook = undefined;
let workbookInitialized=(wb)=>{
workbook = wb
}

复制代码

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

let load = (e)=>{
let formData = new FormData();
formData.append("fileName", "path");
axios.post('spread/loadTemplate', formData, {
responseType: "json",
}).then((response) => {
if(response) {
alert("加载成功");
templateJSON = response.data;
workbook.fromJSON(templateJSON);
}
}).catch((response) => {
alert("错误");
})
}

复制代码

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

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

复制代码

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

image.png529804381.png

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

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

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人