本帖最后由 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("错误");
- })
- }
复制代码 现在,新建的按钮就可以工作了。如下图所示,点击工具栏加载按钮,文件已在设计器成功加载。
在下篇文章将带领大家学习 如何将SpreadJS集成在此项目 中。
附件为前后端示例代码,大家可以参考下。
|
|