【SpreadJS V15.1 新特性介绍】 表格编辑器组件支持 Vue3 框架

SpreadJS V14.2.0之后，组件运行时支持了Vue3，详细用法可参考Vue3中使用SpreadJS组件运行时。

SpreadJSV15.1.0中，对于在线表格编辑器，新增了Vue3的支持，本文会演示如何在Vue3工程中引入在线表格编辑器。
Step1: 可以选择以下任意方式创建一个Vue3工程，在这里，我用的是vite，当然你也可以选择使用vue-cli；

1. # npm 6.x
   
2. npm init vite@latest spreadjs-vue-ts --template vue-ts
   
3. 
   
4. # npm 7+, 需要额外的双横线：
   
5. npm init vite@latest spreadjs-vue-ts -- --template vue-ts
   
6. 
   
7. # yarn
   
8. yarn create vite spreadjs-vue-ts --template vue-ts
   
9. 
   
10. # pnpm
    
11. pnpm create vite my-vue-app -- --template vue

复制代码

Step2： 安装相关资源

1. npm install @grapecity/spread-sheets-designer
   
2. npm install @grapecity/spread-sheets-designer-resources-cn
   
3. npm install @grapecity/spread-sheets-designer-vue
   
4. npm install @grapecity/spread-sheets
   
5. npm install @grapecity/spread-excelio
   
6. npm install @grapecity/spread-sheets-barcode
   
7. npm install @grapecity/spread-sheets-charts
   
8. npm install @grapecity/spread-sheets-languagepackages
   
9. npm install @grapecity/spread-sheets-print
   
10. npm install @grapecity/spread-sheets-pdf
    
11. npm install @grapecity/spread-sheets-shapes
    
12. npm install @grapecity/spread-sheets-pivot-addon
    
13. npm install @grapecity/spread-sheets-tablesheet

复制代码

Step3: 组件注册
在main.js中对designer组件进行全局注册，当然你也可以使用局部组件注册方式，这里演示的是全局注册的方式。

1. import { createApp } from 'vue'
   
2. import App from './App.vue'
   
3. import Designer from "@grapecity/spread-sheets-designer-vue"
   
4. const app = createApp(App);
   
5. app.component("gc-spread-sheets-designer",Designer);
   
6. app.mount('#app')

复制代码

Step4:  创建vue文件，使用组件
在components文件夹下新建VueDesigner.vue，引入designer其它依赖资源，编写组件，详细代码如下所示：

1. <template>
   
2.   <div id="gc-designer-container">
   
3.     <gc-spread-sheets-designer
   
4.       :styleInfo="styleInfo"
   
5.       :spreadOptions="spreadOptions"
   
6.       @designerInitialized="designerInitialized"/>
   
7.   </div>
   
8. </template>
   
9. 
   
10. <script setup lang="ts">
    
11. import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    
12. import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    
13. import * as GC from "@grapecity/spread-sheets";
    
14. import "@grapecity/spread-sheets-print";
    
15. import "@grapecity/spread-sheets-shapes";
    
16. import "@grapecity/spread-sheets-pivot-addon";
    
17. import "@grapecity/spread-sheets-tablesheet";
    
18. import "@grapecity/spread-sheets-designer-resources-cn";
    
19. import * as GcDesigner from "@grapecity/spread-sheets-designer";
    
20. import {reactive, toRefs} from 'vue'
    
21. interface IData{
    
22.     designer:GcDesigner.Spread.Sheets.Designer.Designer|null,
    
23.     spread: GC.Spread.Sheets.Workbook|null
    
24. }
    
25. const data:IData = reactive({
    
26.      designer:null,
    
27.      spread: null
    
28. })
    
29. const refData = toRefs(data)
    
30. const styleInfo={height: '98vh'}
    
31. const spreadOptions={sheetCount:2}
    
32. const designerInitialized = (entity:GcDesigner.Spread.Sheets.Designer.Designer) => {
    
33.      data.designer = entity
    
34.      let spread:GC.Spread.Sheets.Workbook = data.designer.getWorkbook() as GC.Spread.Sheets.Workbook
    
35.      let sheet = spread.getActiveSheet()
    
36.      sheet.setValue(0,0,'Grapecity')
    
37. }
    
38. </script>
    

复制代码

**注意**这里使用Vue3提供的reactive方法对designer进行了封装，但是根据以往经验，这种封装后续会给数据添加一些额外的属性，种种操作会使ts验证报一些意向不到的错误。因此这里推荐还是使用直观的变量形式来定义designer。
step5： 在app.vue中引入定义好的vue-designer组件，代码如下：

1. <template>
   
2.   <vue-designer/>
   
3. </template>
   
4. 
   
5. <script setup lang="ts">
   
6.   import VueDesigner from './components/VueDesigner.vue';
   
7. </script>
   
8. 
   
9. <style>
   
10. #app {
    
11.   font-family: Avenir, Helvetica, Arial, sans-serif;
    
12.   -webkit-font-smoothing: antialiased;
    
13.   -moz-osx-font-smoothing: grayscale;
    
14.   color: #2c3e50;
    
15. }
    
16. </style>
    

复制代码

详细demo见文章末尾。

报错信息：


main.js

1. import { createApp } from "vue";
   
2. import { createPinia } from "pinia";
   
3. 
   
4. import ElementPlus from "element-plus";
   
5. import "element-plus/dist/index.css";
   
6. 
   
7. import App from "./App.vue";
   
8. import router from "./router";
   
9. 
   
10. // import {
    
11. //   GcSpreadSheets,
    
12. //   GcWorksheet,
    
13. //   GcColumn,
    
14. // } from "@grapecity/spread-sheets-vue";
    
15. import Designer from "@grapecity/spread-sheets-designer-vue";
    
16. // import "@/style/normalize.css";
    
17. import "virtual:windi.css";
    
18. 
    
19. const app = createApp(App);
    
20. 
    
21. app.component("gc-spread-sheets-designer", Designer);
    
22. // app.component("gc-spread-sheets", GcSpreadSheets);
    
23. // app.component("gc-worksheet", GcWorksheet);
    
24. // app.component("gc-column", GcColumn);
    
25. 
    
26. app.use(ElementPlus);
    
27. app.use(createPinia());
    
28. app.use(router);
    
29. 
    
30. app.mount("#app");
    

复制代码

// VueDesigner.vue

1. <template>
   
2.   <div id="gc-designer-container">
   
3.     <gc-spread-sheets-designer
   
4.       :styleInfo="styleInfo"
   
5.       :spreadOptions="spreadOptions"
   
6.       @designerInitialized="designerInitialized"
   
7.     />
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script setup>
    
12. import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
    
13. import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    
14. import * as GC from "@grapecity/spread-sheets";
    
15. import "@grapecity/spread-sheets-print";
    
16. import "@grapecity/spread-sheets-shapes";
    
17. import "@grapecity/spread-sheets-pivot-addon";
    
18. import "@grapecity/spread-sheets-tablesheet";
    
19. import "@grapecity/spread-sheets-designer-resources-cn";
    
20. import * as GcDesigner from "@grapecity/spread-sheets-designer";
    
21. import { reactive, toRefs } from "vue";
    
22. const data = reactive({
    
23.   designer: GcDesigner.Spread.Sheets.Designer.Designer | null,
    
24.   spread: GC.Spread.Sheets.Workbook | null,
    
25. });
    
26. const refData = toRefs(data);
    
27. const styleInfo = { height: "98vh" };
    
28. const spreadOptions = { sheetCount: 2 };
    
29. const designerInitialized = (entity) => {
    
30.   data.designer = entity || GcDesigner.Spread.Sheets.Designer.Designer;
    
31.   let spread = data.designer.getWorkbook(); //  GC.Spread.Sheets.Workbook
    
32.   let sheet = spread.getActiveSheet();
    
33.   sheet.setValue(0, 0, "Grapecity");
    
34. };
    
35. </script>
    

复制代码

package.json

1. "dependencies": {
   
2.     "@fortawesome/fontawesome-free": "^6.1.1",
   
3.     "@grapecity/spread-excelio": "^15.1.1",
   
4.     "@grapecity/spread-sheets": "^15.1.1",
   
5.     "@grapecity/spread-sheets-barcode": "^15.1.1",
   
6.     "@grapecity/spread-sheets-charts": "^15.1.1",
   
7.     "@grapecity/spread-sheets-designer": "^15.1.1",
   
8.     "@grapecity/spread-sheets-designer-resources-cn": "^15.1.1",
   
9.     "@grapecity/spread-sheets-designer-vue": "^15.1.1",
   
10.     "@grapecity/spread-sheets-languagepackages": "^15.1.1",
    
11.     "@grapecity/spread-sheets-pdf": "^15.1.1",
    
12.     "@grapecity/spread-sheets-pivot-addon": "^15.1.1",
    
13.     "@grapecity/spread-sheets-print": "^15.1.1",
    
14.     "@grapecity/spread-sheets-resources-zh": "^15.1.0",
    
15.     "@grapecity/spread-sheets-shapes": "^15.1.1",
    
16.     "@grapecity/spread-sheets-tablesheet": "^15.1.1",
    
17.     "@grapecity/spread-sheets-vue": "^15.1.0",
    
18.     "axios": "^0.27.2",
    
19.     "element-plus": "^2.2.2",
    
20.     "pinia": "^2.0.14",
    
21.     "vue": "^3.2.36",
    
22.     "vue-router": "^4.0.15"
    
23.   },

复制代码

呆子 发表于 2022-6-13 17:11
报错信息：

你在main.js里边把resources的资源加一下。

1. <template>
   
2.   <div id="gc-designer-container">
   
3.     <gc-spread-sheets-designer
   
4.       :styleInfo="styleInfo"
   
5.       :spreadOptions="spreadOptions"
   
6.       @designerInitialized="designerInitialized"
   
7.     />
   
8.   </div>
   
9. </template>
   
10. 
    
11. <script setup lang="ts">
    
12. import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
    
13. import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    
14. import * as GC from "@grapecity/spread-sheets";
    
15. import "@grapecity/spread-sheets-print";
    
16. import "@grapecity/spread-sheets-shapes";
    
17. import "@grapecity/spread-sheets-pivot-addon";
    
18. import "@grapecity/spread-sheets-tablesheet";
    
19. import "@grapecity/spread-sheets-designer-resources-cn";
    
20. import * as GcDesigner from "@grapecity/spread-sheets-designer";
    
21. import { reactive, toRefs, onMounted, ref } from "vue";
    
22. 
    
23. // GC.Spread.Sheets.Designer.LicenseKey = "my key";
    
24. 
    
25. 
    
26. interface IData {
    
27.   designer: GcDesigner.Spread.Sheets.Designer.Designer | null;
    
28.   spread: GC.Spread.Sheets.Workbook | null;
    
29. }
    
30. const data: IData = reactive({
    
31.   designer: null,
    
32.   spread: null,
    
33. });
    
34. const refData = toRefs(data);
    
35. const styleInfo = { height: "98vh" };
    
36. const spreadOptions = { sheetCount: 2 };
    
37. const designerInitialized = (
    
38.   entity: GcDesigner.Spread.Sheets.Designer.Designer
    
39. ) => {
    
40.   data.designer = entity;
    
41.   let spread: GC.Spread.Sheets.Workbook =
    
42.     data.designer.getWorkbook() as GC.Spread.Sheets.Workbook;
    
43.   let sheet = spread.getActiveSheet();
    
44.   sheet.setValue(0, 0, "Grapecity");
    
45. };
    
46. 
    
47. const addBar = () => {
    
48.   var config = GC.Spread.Sheets.Designer.DefaultConfig;
    
49.   config.commandMap = {
    
50.     Welcome: {
    
51.       title: "Welcome",
    
52.       text: "Welcome",
    
53.       iconClass: "ribbon-button-welcome",
    
54.       bigButton: "true",
    
55.       commandName: "Welcome",
    
56.       execute: async (context, propertyName, fontItalicChecked) => {
    
57.         alert("Welcome to new designer.");
    
58.       },
    
59.     },
    
60.   };
    
61.   config.ribbon[0].buttonGroups.unshift({
    
62.     label: "NewDesigner",
    
63.     thumbnailClass: "welcome",
    
64.     commandGroup: {
    
65.       children: [
    
66.         {
    
67.           direction: "vertical",
    
68.           commands: ["Welcome"],
    
69.         },
    
70.         // This is custom button ----------------end-------------
    
71.       ],
    
72.     },
    
73.   });
    
74. };
    
75. addBar();
    
76. </script>

复制代码

使用该 demo 添加了 自定义按钮；在未设置 LicenseKey是可以正常显示，在添加了LicenseKey之后，按钮不显示。这个要如何解决。
C:\Users\mujunhong\Desktop\未设置licenseKey.png
C:\Users\mujunhong\Desktop\设置licenseKey.png

snowflakes7 发表于 2022-6-22 18:22
使用该 demo 添加了 自定义按钮；在未设置 LicenseKey是可以正常显示，在添加了LicenseKey之后，按钮不显 ...

无法复现问题，请提供相关demo到求助专区发帖~